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

redirect

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

ストリーミングコンテキストで使用すると、クライアント側でリダイレクトを発生させるメタタグを挿入します。server actionで使用すると、呼び出し元に303 HTTPリダイレクトレスポンスを提供します。それ以外の場合は、呼び出し元に307 HTTPリダイレクトレスポンスを提供します。

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

知っておくとよいこと:

  • Server ActionsとRoute Handlersでは、redirectはtry/catchブロックの後に呼び出すべきです
  • 307 (一時的)ではなく、308 (恒久的) HTTPリダイレクトを返したい場合は、代わりにpermanentRedirect関数を使用できます

パラメータ​

redirect関数は2つの引数を取ります:

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

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

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

戻り値​

redirectは値を返しません。

例​

Server Component​

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

app/team/[id]/page.js
import { redirect } 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) {
    redirect('/login')
  }

  // ...
}

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

Client Component​

redirectはServer Actionを介してClient Componentでも使用できます。イベントハンドラを使用してユーザーをリダイレクトする必要がある場合は、useRouterフックを使用できます。

app/client-redirect.tsx
'use client'

import { navigate } from './actions'

export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}
app/actions.ts
'use server'

import { redirect } from 'next/navigation'

export async function navigate(data: FormData) {
  redirect(`/posts/${data.get('id')}`)
}

FAQ​

なぜredirectは307と308を使用するのですか？​

redirect()を使用すると、ステータスコードが一時的なリダイレクトには307、恒久的なリダイレクトには308が使用されていることに気づくかもしれません。従来は一時的なリダイレクトには302、恒久的なリダイレクトには301が使用されていましたが、多くのブラウザでは、302を使用した場合にリダイレクトのリクエストメソッドを、元のリクエストメソッドにかかわらず、POSTからGETに変更していました。

例えば、/usersから/peopleへのリダイレクトは次のように考えます。新しいユーザーを作成するために/usersにPOSTリクエストを送る場合、302一時的リダイレクトに従うとリクエストメソッドがPOSTからGETに変更されます。しかし、新しいユーザーを作成するためには、/peopleに対してPOSTリクエストを送るべきであり、GETリクエストではありません。

307ステータスコードの導入により、リクエストメソッドがPOSTとして維持されることを意味します。

  • 302 - 一時的なリダイレクト。リクエストメソッドをPOSTからGETに変更します
  • 307 - 一時的なリダイレクト。リクエストメソッドをPOSTとして保持します

redirect()メソッドはデフォルトで307を使用し、302一時的なリダイレクトの代わりに使用します。これにより、リクエストが常にPOSTリクエストとして保持されます。

HTTPリダイレクトについて詳しく学ぶ。

バージョン履歴​

バージョン変更点
v13.0.0redirectが導入されました。