next-redirects-preact

A small Redirect utility component for Next.js

Usage no npm install needed!

<script type="module">
  import nextRedirectsPreact from 'https://cdn.skypack.dev/next-redirects-preact';
</script>

README

Next-Redirects-Preact

NPM Version Monthly download on NPM

next-redirects-preact 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

How to install

  #using yarn
  yarn add next-redirects-preact

  #using npm
  npm install next-redirects-preact

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-preact";
";
<Redirects href="/main" condition={auth.loggedin} />;

If you have a switch or more than the condition

//X.tsx
import { Redirects } from "next-redirects-preact";
";
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-preact";
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 🛠