Next-Redirects

Next-Redirects is a small Redirect utility for client & serve side for Next.js, with a small package size

⚠️ version 3.x and above is needs next.js v12 at least ⚠️

Features

• ⚛️ Client and Server side
• 🔥 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

For the client side, you can use the following code

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 |

//X.tsx
import { Redirects } from "next-redirects";
<Redirects href="/main" condition={auth.loggedin} />;

If you have a switch or more than the condition

//X.tsx
import { Redirects } from "next-redirects";
if (user.loggedin) {
  <Redirects href="/Dashboard" />;
}
switch (condistionX) {
  case admin:
    <Redirects href="/Dashboard" />;
    break;
  case anonymous:
    <Redirects href="/Login" />;
    break;
  default:
    <Redirects href="/main" />;
}

For the server side, you can use the following code

You can use all these props with serverRedirect() funcation

| Prop | usage | type | | :-------- | :-----------------------------------------: | ------- | | condition | The boolean that decides to redirect or not | boolean | | url | The link you want to redirect to | String |

//inside _middleware.ts
import { serverRedirect } from "next-redirects";
export async function middleware(req: NextRequest) {
  const admin = req.cookies.role == "admin";
  return serverRedirect(admin, "/Upload");
}

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