こんばんは。
今日は「Next.jsのApp Routerにおけるredirectとrouterについて」について説明いたします。
Next.jsのApp Routerにおけるredirectとrouterは、どちらもページ遷移に関連する機能ですが、使用する状況や動作方法に違いがあります。それぞれの違いについて具体例を挙げながら説明します。
redirect（リダイレクト）
概念:
- redirectは、サーバーまたはクライアント側でURLを別のURLに変更する仕組みです。
- 主にSEO対策、認証管理、URL変更などに使用されます。
- ユーザーが特定のURLにアクセスした際、自動的に別のURLにリダイレクトされます。
- ステータスコード（例: 301, 302）を伴う場合があり、SEOやユーザー体験に影響します。
特徴:
- ページ遷移前にURLが変更されます。
- 元のURLではなく、新しいURLにアクセスします。
- サーバーサイドで行われる場合、ページがリロードされることがあります。
- クライアントサイドでも実装可能ですが、主に事前処理に使用されます。
例:
// app/page.js
import { redirect } from 'next/navigation';
export default function Page() {
const isLoggedIn = false;
if (!isLoggedIn) {
redirect('/login'); // ログインしていないユーザーをログインページにリダイレクト
}
return <h1>Welcome!</h1>;
}
- ユーザーが/にアクセスした場合、redirectによって/loginに自動遷移。
- ブラウザ上には元のURL/ではなく、/loginが表示されます。
router（ルーター）
概念:
- routerは、クライアントサイドのナビゲーションを行うための機能です。
- ページ遷移を実現しますが、URLが即座に更新され、サーバーリクエストを伴いません。
- 主にボタンクリックやユーザー操作に基づいて動作します。
- ページのリロードが発生せず、SPA（シングルページアプリケーション）として動作します。
特徴:
- ユーザー操作（ボタンクリックやリンククリック）によってトリガーされます。
- 現在のURLを保持しながら、別のURLに遷移します。
- URLは変更されますが、ページの再読み込みは行われません。
例:
// app/page.js
'use client';
import { useRouter } from 'next/navigation';
export default function Page() {
const router = useRouter();
const handleNavigation = () => {
router.push('/dashboard'); // ダッシュボードに遷移
};
return (
<div>
<h1>Welcome!</h1>
<button onClick={handleNavigation}>Go to Dashboard</button>
</div>
);
}
- ユーザーがボタンをクリックすると、router.pushによって/dashboardに移動。
- ページはリロードされず、瞬時に切り替わります。
主な違い
| 項目 | redirect（リダイレクト） | router（ルーター） |
|---|---|---|
| 動作場所 | サーバー/クライアント両方で可能 | クライアント専用 |
| 用途 | 条件に基づくURLの変更（認証チェック、SEOなど） | ユーザー操作に基づくナビゲーション |
| ページリロード | 場合によっては発生 | 発生しない（SPA方式で動作） |
| ステータスコード | 301, 302などが使用可能 | ステータスコードなしでURL遷移 |
| 使用例 | 初期ロード時の認証チェックによるリダイレクト | ボタンクリックによるページ遷移 |
この2つの機能は目的とページ遷移の方式に違いがあるため、適切な状況で使い分けることが重要です。
今日は以上です。
ありがとうございました。
よろしくお願いいたします。