How to Redirect in Next.js ?

NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. In this article, we will learn about How to Redirect in NextJS with different approaches.

We will discuss different approaches to Redirect in NextJS:

Steps to Setup a NextJS App

Step 1: Create a NextJS application using the following command and answer some few questions.

npx create-next-app@latest app_name

Step 2: After creating your project folder, move to it using the following command.

cd app_name

Using Redirect method

redirect function allow us to redirect a user to another page. It can be used in Server Component, Route Handler and Server Action. It can be used in Client Component through Server Action.

To use a redirect function, we have to import it from next/navigation. and inside redirect() method we have to pass a route path.

Example: The below example demonstrate the use of Redirect method

//page.js
'use client'
 
import { welcomepage } from './actions'
 
export default function ClientRedirect() {
  return (
    <form action={welcomepage}>
      <button>Submit</button>
    </form>
  )
}

//page.js (welcome directory)
 
export default function Page() {
  return (
    <>
        <h1>Welcome</h1>
    </>
  )
}

//actions.js
'use server'
 
import { redirect } from 'next/navigation'
 
export async function welcomepage(data) {
  redirect(`/welcome`)
}

Start your application using the command:

npm run dev

Output:

Using Configuration setting

Next.js provides us a Configuration file named next.config.js, Which can be also used to define a static redirect. This static redirect is useful where the redirection remains constant and doesn't depend on dynamic user input or server-side logic. This approach is beneficial for directing users from outdated URLs to updated ones.

We can define a static redirecting using the redirects property. In below example, if user tries to access "/" route then it will redirect to "/about" route.

Example: The below example demonstrate the use of configuration setting

//next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    async redirects() {
        return [
          {
            source: '/',
            destination: '/gfg',
            permanent: false,
          },]
      },
};

export default nextConfig;

//page.js (gfg directory)
 
export default function Page() {
  return (
    <>
        <h1>GeeksForGeeks</h1>
    </>
  )
}

Output:

Using Router Push method

If we want to do redirect in a client component on client side event then we can use a push() method of useRouter hook. In Push(new_routePath), we have to pass a route path where we have to redirect after some action. To use a push() method, we have to import useRouter hook from next/navigation.

Example: The below example demonstrate the use of router push method

//page.js 
'use client'

import { useRouter } from "next/navigation"
import { useState } from "react"

export default function ClientRedirect() {
  const [counter, setCounter] = useState(5)

  const router = useRouter()
 
  if(counter == 0){
    router.push('/gfg')
  }
  
  setInterval(()=>{
    setCounter(counter-1)
  },1000)
 
  return (
    <>
      <h1>Time Left {counter}</h1>
    </>
  )
}

//page.js (gfg directory)
 
export default function Page() {
  return (
    <>
        <h1>Welcome to GeeksForGeeks</h1>
    </>
  )
}

Output:

Using Next Response

This approach is used in a middleware. Middleware allows you to run code before a request is completed. based on the incoming request we can redirect to a different route or URL using NextResponse.redirect() method. We can use this to redirect a user based on a conditions such as Session exist, authentication etc..

Example: The below example demonstrate the use of Next Response

//page.js (gfg directory)
 
export default function Page() {
  return (
    <>
        <h1>Welcome to GeeksForGeeks</h1>
    </>
  )
}

//middleware.js (src directory)
import { NextResponse } from "next/server"

export async function middleware(req) { 
     return NextResponse.redirect(new URL('/gfg', req.url))
}

export const config = {
    matcher: '/',
}

Output: