redirect

redirect 関数を使用すると、ユーザーを別の URL にリダイレクトできます。redirect は サーバーコンポーネント (Server Components)、ルートハンドラ (Route Handlers)、サーバーアクション (Server Actions) で使用できます。

ストリーミングコンテキスト (streaming context) で使用すると、クライアントサイドでリダイレクトを実行するための meta タグが挿入されます。サーバーアクションで使用すると、呼び出し元に 303 HTTP リダイレクトレスポンスが返されます。それ以外の場合は、呼び出し元に 307 HTTP リダイレクトレスポンスが返されます。

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

補足:

• サーバーアクションとルートハンドラでは、redirect は try/catch ブロックの後に呼び出す必要があります。
• 307 (一時的) HTTP リダイレクトではなく 308 (永続的) HTTP リダイレクトを返したい場合は、代わりに permanentRedirect 関数 を使用できます。

パラメータ

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

redirect(path, type)

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

type パラメータはサーバーコンポーネントでは効果がありません。

戻り値

redirect は値を返しません。

例

サーバーコンポーネント

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

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 は TypeScript の never 型を使用しているため、return redirect() を使用する必要はありません。

クライアントコンポーネント

redirect はサーバーアクションを通じてクライアントコンポーネントで使用できます。イベントハンドラを使用してユーザーをリダイレクトする必要がある場合は、useRouter フックを使用できます。

'use client'

import { navigate } from './actions'

export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

'use client'

import { navigate } from './actions'

export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

'use server'

import { redirect } from 'next/navigation'

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

'use server'

import { redirect } from 'next/navigation'

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

よくある質問

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

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

/users から /people へのリダイレクトの例を考えてみましょう。新しいユーザーを作成するために /users に POST リクエストを送信し、302 一時リダイレクトに従う場合、リクエストメソッドは POST から GET に変更されます。これは理にかなっていません。新しいユーザーを作成するには、/people に GET リクエストではなく POST リクエストを送信する必要があります。

307 ステータスコードの導入により、リクエストメソッドが POST として保持されるようになりました。

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

redirect() メソッドはデフォルトで 302 一時リダイレクトではなく 307 を使用するため、リクエストは常に POST リクエストとして保持されます。

HTTP リダイレクトについてさらに学ぶ。

バージョン履歴