redirectの使い方：サーバー側の条件で移動先を決める
redirectでサーバー側からページ遷移を指示する方法を学びます。例外による制御、HTTPステータス、入力値を移動先へ使う際の注意点を解説します。
redirectでサーバー側からページ遷移を指示する方法を学びます。例外による制御、HTTPステータス、入力値を移動先へ使う際の注意点を解説します。
対象環境と役割
App Routerで使う機能
この記事のApp Routerの例はNext.js 15以降の非同期リクエストAPIに合わせた書き方です。Next.js 16ではCache Componentsを有効にしない構成を前提とします。Pages Routerの記事とは配置先・実行場所が異なるため、プロジェクトのルーターとバージョンを先に確認してください。
TypeScriptの例は5.2以降と、利用するNext.jsが対応するNode.jsを前提にします。app/layout.tsx を備えたApp Routerプロジェクトで実行してください。
引数・戻り値・受け渡すデータ
redirect(path) は通常の値を返して次の処理へ進む関数ではなく、描画を終了するための制御を発生させます。任意のURLを渡せることと、渡してよいことは別です。
コード例を動かす
app/legacy/page.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
import { redirect } from 'next/navigation';
export default function LegacyPage() {
redirect('/');
}実行結果と処理の順序
/legacy にアクセスするとトップへ移動します。この例は固定された内部URLへ移動するため、ユーザー入力から転送先を組み立てません。
通常のサーバー応答では307、Server Actionでは303が使われます。ストリーミング中はmetaタグによる移動になる場合があり、常に同じHTTP応答になると決めつけないようにします。
つまずきやすい点と使い分け
try/catchで飲み込まない
処理失敗を捕捉するtryの中でredirectを呼ぶと、遷移のための制御までcatchしてしまう可能性があります。保存処理のエラー処理を終えてから、try/catchの外で移動します。
認証・認可の代わりにしない
未ログインならログイン画面へ移動させる設計でも、データ取得や更新処理側の認証・認可は必要です。外部入力のreturnToを使う場合は許可する移動先を限定します。
静的出力で使えるか
静的ファイルだけの配信で、リクエストごとのサーバー判定やHTTP転送をこの関数に任せることはできません。静的サイトの旧URL転送は、公開Webサーバーやホスティングの転送ルールとして設計します。
確認課題と実務への応用
自分で値を変えて確認する
開発者ツールで移動先と応答を確認します。恒久移転なら permanentRedirect やWebサーバーの転送規則との違いを整理してください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。