メインコンテンツまでスキップ

permanentRedirect

permanentRedirect関数を使用すると、ユーザーを別のURLにリダイレクトできます。permanentRedirectはServer Components、Client Components、Route Handlers、およびServer Actionsで使用できます。

ストリーミングのコンテキストで使用されると、クライアント側でリダイレクトを発生させるためのメタタグを挿入します。Server Actionで使用されると、呼び出し元に対して303 HTTPリダイレクトレスポンスを返します。それ以外の場合は、呼び出し元に対して308（パーマネント）HTTPリダイレクトレスポンスを返します。

リソースが存在しない場合は、代わりにnotFound関数を使用できます。

Good to know: 308（Permanent）の代わりに307（Temporary）HTTPリダイレクトを返したい場合は、代わりにredirect関数を使用できます。

パラメーター​

permanentRedirect関数は2つの引数を受け取ります：

permanentRedirect(path, type)
パラメータタイプ説明
pathstringリダイレクト先のURL。相対パスまたは絶対パスが指定できます。
type'replace'（デフォルト）または 'push'（Server Actions でのデフォルト）実行するリダイレクトのタイプ。

デフォルトでは、permanentRedirectはServer Actionsでpush（ブラウザの履歴スタックに新たなエントリを追加する）を使用し、それ以外ではreplace（ブラウザの履歴スタックの現在のURLを置き換える）を使用します。typeパラメータを指定することで、この動作を上書きできます。

typeパラメータは、Server Components で使用した場合には効果がありません。

戻り値​

permanentRedirectは値を返しません。

例​

permanentRedirect()関数を呼び出すと、NEXT_REDIRECTエラーをスローし、それがスローされたRoute Segmentの描画を終了します。

app/team/[id]/page.js
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(params.id)
  if (!team) {
    permanentRedirect('/login')
  }

  // ...
}

Good to know：permanentRedirectは TypeScript のnever型を使用しているため、return permanentRedirect()と書く必要はありません。