Next.js - permanentRedirect() Function

---

---

The permanentRedirect() Function

The Next.js permanentRedirect() function is used to redirect the client to a new URL with a permanent redirect status code (301). This function is helpful when you want to permanently redirect a user to a new location.

Syntax

Following is the syntax of permanentRedirect() function:

import { permanentRedirect } from 'next/navigation'

export default async function Profile({ params }) {
    const user = await fetchUser((await params).id)
    
    // If user not found, redirect to the home page
    if (!user) {
        permanentRedirect('/')
    }
}

Parameters

The permanentRedirect() function takes two parameters:

• path - string - The URL to redirect to. Can be a relative or absolute path.
• type - 'replace' (default) or 'push' (default in Server Actions) - The type of redirect to perform.

By default, permanentRedirect will use push (adding a new entry to the browser history stack) in Server Actions and replace (replacing the current URL in the browser history stack) everywhere else. You can override this behavior by specifying the type parameter.

Return Value

The permanentRedirect() function does not return any value. It does not require you to use 'return permanentRedirect()' as it uses the TypeScript never type.

Example 1

In the example below, we are redirecting feature to the product page we created in previous chapter. On clicking the submit button, user will get a confirmation of the order and redirect them to home page.

"use client"; 

import { permanentRedirect } from 'next/navigation'
import { PageProps } from "next/dist/shared/lib/router/utils/page-props";

export default function ProductPage({ params }: PageProps) {

    const handleClick = () =>{
        alert("Order Placed...");

        // Redirect to home page after placing order
        permanentRedirect('/')
    };
    return (
        <div>
        <h1>Product {params.id}</h1>
        <p>This is the product page for item {params.id}</p>
        <button onClick={handleClick}>Order Item</button>
        </div>
    );
}

Output

In the output, after placing order user is getting redirected to home page.

Example 2

Invoking the permanentRedirect() function throws a NEXT_REDIRECT error and terminates rendering of the route segment in which it was thrown. In the example below, we are fetching the team from the database and redirecting user to login page if team is not found.

import { permanentRedirect } from 'next/navigation'
 
async function fetchTeam(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }) {
  const team = await fetchTeam((await params).id)
  if (!team) {
    permanentRedirect('/login')
  }
 
}