redirect

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

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

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

リファレンス

パラメータ

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

redirect(path, type)

デフォルトでは、redirectはServer Actionsでpush（ブラウザ履歴スタックに新しいエントリを追加）を使用し、その他の場所ではreplace（ブラウザ履歴スタックの現在のURLを置き換え）を使用します。typeパラメータを指定することで、この動作をオーバーライドできます。

RedirectTypeオブジェクトには、typeパラメータで利用可能なオプションが含まれています。

import { redirect, RedirectType } from 'next/navigation'
 
redirect('/redirect-to', RedirectType.replace)
// または
redirect('/redirect-to', RedirectType.push)

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

戻り値

redirectは値を返しません。

動作

• Server ActionsおよびRoute Handlersでは、try/catchステートメントを使用する場合、redirectはtryブロック外で呼び出す必要があります。
• 307（一時的）HTTPリダイレクトの代わりに308（永続的）HTTPリダイレクトを返したい場合は、代わりにpermanentRedirect関数を使用できます。
• redirectはエラーをスローするため、try/catchステートメントを使用する場合、tryブロック外で呼び出す必要があります。
• redirectはClient Componentsでレンダリングプロセス中に呼び出すことができますが、イベントハンドラーでは呼び出すことができません。代わりにuseRouterフックを使用できます。
• redirectは絶対URLも受け取り、外部リンクへのリダイレクトに使用できます。
• レンダープロセスの前にリダイレクトする場合は、next.config.jsまたはProxyを使用してください。

例

Server Component

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型を使用しているためです。

Client Component

redirectはClient Componentで直接使用できます。

'use client'
 
import { redirect, usePathname } from 'next/navigation'
 
export function ClientRedirect() {
  const pathname = usePathname()
 
  if (pathname.startsWith('/admin') && !pathname.includes('/login')) {
    redirect('/admin/login')
  }
 
  return <div>Login Page</div>
}

補足: Server-Side Rendering（SSR）の初期ページロード中にClient Componentでredirectを使用する場合、サーバー側でリダイレクトが実行されます。

redirectはServer Actionを通じてClient Componentで使用できます。ユーザーをリダイレクトするためにイベントハンドラーを使用する必要がある場合は、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')}`)
}

よくある質問

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リダイレクトの詳細をご覧ください。

バージョン履歴