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

redirect

redirect 関数はユーザーを他のURLにリダイレクトすることを可能にします。redirectはServer Component、Route Handlers、Server Actionsで利用できます。

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

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

Good to know:

  • Server Actions およびRoute Handlersでは、try/catchブロックの後にredirectを呼び出すべきです。
  • 307(Temporary)のHTTPリダイレクトではなく、308(Permanent)のHTTPリダイレクトを返したい場合は、permanentRedirect関数を使用できます。

Parameters​

redirect関数は2つの引数を受け入れます：

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

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

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

Returns​

redirectは値を返しません。

例​

Server Component​

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

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')
  }

  // ...
}

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

Client Component​

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

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()メソッドは302の維持的なリダイレクトではなく、デフォルトで307を使用します。そのため、リクエストは 常に POSTリクエストとして保持されます。

HTTPリダイレクトの詳細はこちらを参照してください。

バージョン履歴​

バージョン変更点
v13.0.0redirectの導入