A small Redirect utility component for Next.js

Usage no npm install needed!

<script type="module">
  import nextRedirects from '';



NPM Version Monthly download on NPM

Next-Redirects is a small Redirect utility component for Next.js that can give fallback links for different conditions and with a small package size


  • 🔥 Small and Fast
  • 🛠 Fully supports esm
  • 💜 supported Preact so all next.js project using Preact Next-redirects-preact

How to install

  #using yarn
  yarn add Next-Redirects
  #using npm
  npm i Next-Redirects

How to use

There is one component that can be used, it can be used in more than one way

You can use all these props with <Redirects> component

Prop usage type
href The link you want to redirect to String
condition The boolean that decides to redirect or not boolean
fallBack (optional) The Fallback link if the condition is false String
asPath (optional) The path mask if you want to show a different url than the real one string
shallow (optional) The shallow option in next router for more info boolean
<Redirects href="/main" condition={auth.loggedin} />

If you have a switch or more than the condition

if (user.loggedin) {
  <Redirects href="/Dashboard" />;
switch (condistionX) {
  case admin:
    <Redirects href="/Dashboard" />;
  case anonymous:
    <Redirects href="/Login" />;
    <Redirects href="/main" />;

This is just an example you can use it for whatever use cases you can imagine 🛠