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

redirect

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

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

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

Good to know:

  • Server Actions と Route Handlers では、redirect は try/catch ブロックの後に呼び出す必要があります。
  • 307（Temporary）ではなく308（Permanent）の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.tsx
import { redirect } from 'next/navigation'

async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}

export default async function Profile({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const team = await fetchTeam(id)

  if (!team) {
    redirect('/login')
  }

  // ...
}

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

HTTPリダイレクトについての詳細はこちらをご覧ください。

バージョン履歴​

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