redirect

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

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

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

知っておくとよいこと:

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

パラメーター

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

redirect(path, type)

デフォルトでは、redirect は、サーバーアクションでは 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 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リダイレクトについてさらに学ぶ。

バージョン履歴