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

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

redirect はクライアントコンポーネントで直接使用できます。

'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>
}

知っておくと便利: サーバーサイドレンダリング (SSR) 中の初期ページロード時にクライアントコンポーネントで 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>
  )
}

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

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

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