Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

redirect

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

ストリーミングコンテキストで使用した場合、クライアント側でリダイレクトを実行するためのmetaタグが挿入されます。サーバーアクション内で使用した場合、呼び出し元に303 HTTPリダイレクトレスポンスを送信します。それ以外の場合は、307 HTTPリダイレクトレスポンスを送信します。

リソースが存在しない場合は、代わりにnotFoundファンクションを使用できます。

補足:

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

パラメータ

redirectファンクションは2つの引数を受け取ります:

redirect(path, type)
パラメータ説明
pathstringリダイレクト先のURL。相対パスまたは絶対パスが可能です。
type'replace'(デフォルト)または'push'(サーバーアクションでのデフォルト)実行するリダイレクトのタイプ。

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

typeパラメータはサーバーコンポーネントでは効果がありません。

戻り値

redirectは値を返しません。

サーバーコンポーネント

redirect()ファンクションを呼び出すと、NEXT_REDIRECTエラーがスローされ、それが発生したルートセグメントのレンダリングが終了します。

app/team/[id]/page.tsx
TypeScript
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')
  }
 
  // ...
}

補足: redirectreturn redirect()を使用する必要はありません。TypeScriptのnever型を使用しているためです。

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

redirectはサーバーアクションを通じてクライアントコンポーネントで使用できます。イベントハンドラーを使用してユーザーをリダイレクトする必要がある場合は、useRouterフックを使用できます。

app/client-redirect.tsx
TypeScript
'use client'
 
import { navigate } from './actions'
 
export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}
app/actions.ts
TypeScript
'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へのリダイレクトの例を考えてみましょう。新しいユーザーを作成するために/usersPOSTリクエストを行い、302一時的なリダイレクトに従う場合、リクエストメソッドがPOSTからGETに変更されます。これは理にかなっていません。新しいユーザーを作成するには、/peoplePOSTリクエストを行うべきであり、GETリクエストではありません。

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

  • 302 - 一時的なリダイレクト、リクエストメソッドをPOSTからGETに変更
  • 307 - 一時的なリダイレクト、リクエストメソッドをPOSTとして保持

redirect()メソッドは、デフォルトで302ではなく307を使用するため、リクエストは常にPOSTリクエストとして保持されます。

詳細情報についてはHTTPリダイレクトをご覧ください。

バージョン履歴

バージョン変更内容
v13.0.0redirectが導入されました。