How to use Redirect method In Next.js

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

JavaScript

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

JavaScript

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

JavaScript

//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:

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:

Table of Content

Using Redirect method
Using Configuration setting
Using Router Push method
Using Next Response

How to use Redirect method In Next.js

Start your application using the command:

How to Redirect in Next.js ?

Similar Reads

Contact Us