Skip to content
This repository has been archived by the owner on Nov 11, 2022. It is now read-only.

mzaien/next-redirects

Repository files navigation

Next-Redirects

NPM Version Monthly download on NPM

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 🛠