site logo

Stacknatic

Stacknatic logo

We Care About Your Privacy

Stacknatic utilizes technologies, such as cookies, to enhance your browsing experience. By using this technology, you can be provided with a more personalized and seamless interaction with this website. By continuing, you agree with the Privacy Policy of Stacknatic.

Privacy Policy | Terms of Use
How to redirect user or page in a Next.js Application | Stacknatic
Home/blog/How to redirect user or page in a Next.js Application

How to redirect user or page in a Next.js Application

featured image for How to redirect user or page in a Next.js Application

Published on: May 21, 2024

Table of Contents

  • You may want to redirect a user after a certain action is performed or based on whether the user is authenticated. Here are two simple ways to do it in Next.js.
  • Client side redirection using useRouter in Next.js
  • How to do server side redirection in Next.js
  • To use redirect directly in a server component, add:
  • How to use redirection through a server action in a client component:

You may want to redirect a user after a certain action is performed or based on whether the user is authenticated. Here are two simple ways to do it in Next.js.

  • Redirection using useRouter (client side redirect)
  • Redirection using redirect (server side redirect)

Some of the sample codes have type declarations for TypeScript, but you can omit the type declarations if you are using plain JavaScript.

Client side redirection using useRouter in Next.js

Follow the steps be below:

import {useRouter} from “next/navigation”;

In your function component, add:

const router = useRouter();

Then simply add ‘router.push(“/dashboard”)’ in the relevant part of your code. Eg:


    if(isAuthenticated){
        router.push(“/dashboard”)
    }


How to do server side redirection in Next.js

Redirect was introduced in Next.js 13, and it is my favorite method of redirecting. It seems faster since the code is executed on the server side, and the user barely notices.

The following example would only work in a server component so if you are using it in a client component  (with “use client” directive), it wouldn’t work. If you want to use redirect in a client component, you can use it through a server action which I will show you in a bit.


To use redirect directly in a server component, add:

Import {redirect} from “next/navigation”

Then simply invoke ‘redirect(“/dashboard”)’ in the relevant part of your code(not that "/dashboard" is just an example. Change it to the necessary page). Eg:

At the top of your function component, add:

const token = await checkToken();
if (token) {
    redirect(“/dashboard”)
}

How to use redirection through a server action in a client component:

Create a server action called redirectAction or any name you want:

// app/actions/redirect-action.ts
“use server”;
import {redirect} from “next/navigation”;
export const redirectAction = async (path: string) => {
    redirect(path);
}

Then in your client component, simply import the function (server action) that you just created and use it instead of router. Eg:

import { redirectAction } from @/app/actions/redirect-action/ 


    if(isAuthenticated){
        redirect(“/dashboard”)
    }

Optionally, you can add a redirect type as a second parameter when using redirect but isn’t necessary in the above examples.

By default, redirect will use push (adds a new entry to the browser history stack) in server actions and replace (replaces the current URL in the browser history stack) elsewhere. You can override this behavior by adding the ‘type’ parameter. Note however that adding the ‘type’ parameter would have no effect in a server component.


To use redirect type, you need to import RedirectType as well. The syntax would look like:

Your import would thus be:

import {redirect, RedirectType} from “next/navigation”;

and the syntax would be. Eg:

redirect(“/dashboard”, RedirectType.replace)

See more posts in Coding
Author:author's avatarMichael

Recommended Posts

CIA Triad Simplified: Automated Workflow for Lawyers

Discover how law firms can automate CIA-triad security—confidentiality, integrity and availability—with encryption, blockchain anchoring and WORM retention.

featured image for How to Create a Django Web App (with Custom User Model)

How to Create a Django Web App (with Custom User Model)

Learn how to create a Django web app with a custom user model, covering setup and the essential steps to tailor your application to your needs.

featured image for CSRF Attack and Implications Explained in Simple Terms With Example

CSRF Attack and Implications Explained in Simple Terms With Example

An explanation of Cross-Site Request Forgery (CSRF) attack, its implications, and effective strategies to protect web applications from unauthorized actions.

featured image for How to Trap Focus in Next.js and React

How to Trap Focus in Next.js and React

Trapping focus ensures that keyboard users can navigate your component without losing focus elsewhere on the page. Learn how to trap focus in React and Next.js.

featured image for How to Implement Debouncing in Next.js

How to Implement Debouncing in Next.js

Debouncing can be used to prevent performance issues or data inaccuracies that may arise from multiple component renderings or repetitive user actions.

featured image for Mutable vs Immutable Data in JavaScript and React.js

Mutable vs Immutable Data in JavaScript and React.js

In programming, data structures can generally be classified as either mutable or immutable. Here is a simplified explanation of both in JavaScript and React.js.