redirect
redirect
ファンクションを使用すると、ユーザーを別のURLにリダイレクトできます。redirect
はサーバーコンポーネント、ルートハンドラー、およびサーバーアクションで使用できます。
ストリーミングコンテキストで使用した場合、クライアント側でリダイレクトを実行するためのmetaタグが挿入されます。サーバーアクション内で使用した場合、呼び出し元に303 HTTPリダイレクトレスポンスを送信します。それ以外の場合は、307 HTTPリダイレクトレスポンスを送信します。
リソースが存在しない場合は、代わりにnotFound
ファンクションを使用できます。
補足:
- サーバーアクションとルートハンドラーでは、
redirect
はtry/catch
ブロックの後に呼び出す必要があります。- 307(一時的)HTTPリダイレクトの代わりに308(恒久的)HTTPリダイレクトを返す場合は、代わりに
permanentRedirect
ファンクションを使用できます。
パラメータ
redirect
ファンクションは2つの引数を受け取ります:
redirect(path, type)
パラメータ | 型 | 説明 |
---|---|---|
path | string | リダイレクト先のURL。相対パスまたは絶対パスが可能です。 |
type | 'replace' (デフォルト)または'push' (サーバーアクションでのデフォルト) | 実行するリダイレクトのタイプ。 |
デフォルトでは、redirect
はサーバーアクションではpush
(ブラウザの履歴スタックに新しいエントリを追加)を使用し、それ以外の場所ではreplace
(ブラウザの履歴スタックの現在のURLを置き換え)を使用します。type
パラメータを指定することで、この動作をオーバーライドできます。
type
パラメータはサーバーコンポーネントでは効果がありません。
戻り値
redirect
は値を返しません。
例
サーバーコンポーネント
redirect()
ファンクションを呼び出すと、NEXT_REDIRECT
エラーがスローされ、それが発生したルートセグメントのレンダリングが終了します。
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')
}
// ...
}
補足:
redirect
はreturn redirect()
を使用する必要はありません。TypeScriptのnever
型を使用しているためです。
クライアントコンポーネント
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リダイレクトをご覧ください。
バージョン履歴
バージョン | 変更内容 |
---|---|
v13.0.0 | redirect が導入されました。 |