コンテンツへスキップ

permanentRedirect

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

ストリーミングコンテキストで使用すると、クライアント側でリダイレクトを発行するためのメタタグが挿入されます。サーバーアクションで使用すると、呼び出し元に303 HTTPリダイレクト応答を提供します。それ以外の場合、呼び出し元に308 (恒久的) HTTPリダイレクト応答を提供します。

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

知っておくと良いこと: 308 (恒久的) の代わりに307 (一時的) HTTPリダイレクトを返したい場合は、代わりにredirect関数を使用できます。

パラメーター

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

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

デフォルトでは、permanentRedirectServer Actionspush (ブラウザの履歴スタックに新しいエントリを追加する) を使用し、それ以外の場所ではreplace (ブラウザの履歴スタック内の現在のURLを置き換える) を使用します。この動作は、typeパラメーターを指定することでオーバーライドできます。

typeパラメーターは、Server Componentsで使用しても効果はありません。

戻り値

permanentRedirectは値を返しません。

permanentRedirect()関数を呼び出すと、NEXT_REDIRECTエラーがスローされ、それがスローされたルートセグメントのレンダリングが終了します。

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 { id } = await params
  const team = await fetchTeam(id)
  if (!team) {
    permanentRedirect('/login')
  }
 
  // ...
}

知っておくと良いこと: permanentRedirectは、TypeScriptのnever型を使用しているため、return permanentRedirect()を使用する必要はありません。