redirect

redirect関数により、ユーザーを他の URL に redirect することができます。 redirectは、Server Components、Route、およびServer Actionsで使用することができます。

Streaming の contextで使用すると、これは client 側で redirect を発生させる meta タグを挿入します。 server action で使用すると、呼び出し元に対して 303 の HTTP redirect response を提供します。それ以外の場合、呼び出し元に対して 307 の HTTP redirect response を提供します。

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

Good to know:

• Server Actions と Route ハンドラーにおいて、redirectはtry/catchブロックの後で呼び出されるべきです。
• もし 307(一時的)ではなく、308(Permanent)の HTTP redirect を返すことを好む場合は、代わりにpermanentRedirect関数を使用できます。

Parameters

redirect 関数は 2 つの引数を受け入れます：

redirect(path, type);

default では、redirectはpush(ブラウザの履歴 stack に新しいエントリを追加する)を Server Actionsで、そしてreplace(ブラウザの履歴 stack の現在の URL を置き換える)をそれ以外の所有所で使用します。この挙動はtypeパラメータを指定することで上書きできます。

type パラメータは Server Components で使用すると効果がありません。

Returns

redirectはどんな value も返しません。

Example

Server Component

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

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は、必要としません return redirect()の使用に対して、それは TypeScript never type を使います。

Client Component

redirectは、 Client Component を通じて Server Action で使用できます。イベント handler を使ってユーザーを redirect する必要がある場合、useRouter hook を使用できます。

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

FAQ

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

redirect()を使用すると、一時的な redirect には307が使用され、 permanent redirect には308が使用されることに気づくかもしれません。伝統的には、一時的な redirect には302が、 permanent redirect には301が使用されていましたが、多くのブラウザは redirect の request method を、元の request method に関係なく、302を使用するときにPOSTからGET request に変更しました。

次の /users から /people への redirect の例を考えてみましょう。新しいユーザーを作成するために /users に POST request を行い、 302 の一時的な redirect に準拠していると、 request method は POST から GET request に変更されます。しかしこれは理にかなっていません。新しいユーザーを作成するには、 /people に対して POST request を行うべきであり、 GET request は行うべきではありません。

307ステータスの導入は、request method がPOSTとして保持されることを意味します。

• 302 - 一時的な redirect は、request method を POST から GET に変更します
• 307 - 一時的な redirect で、 request method を POST のまま保存します

redirect() method は、302の一時的な redirect ではなく、default で307を使用します。これは、あなたの Request が常にPOSTRequest として保持されることを意味します。

Learn more について HTTP Redirects を学びましょう。

Version History