初めに
Next.js でページ遷移を行う方法は主に以下です
Link コンポーネントrouter.push（useRouter）a タグ
それぞれ役割が異なるため、「手段は複数あるけど、どれを使えばいいの？」とならないように使い分けを整理します。
最初に結論
| やりたいこと | 最適手段 | 理由 |
|---|---|---|
| 内部ページへ通常のリンク遷移 | Link | 高速遷移 + prefetch + キャッシュされる |
| イベント後（処理後）に内部遷移したい | router.push | JS ロジック内で遷移できる |
| 外部リンクに遷移したい | a タグ | Link の最適化が効かない / セキュリティ対応しやすい |
| PDF ダウンロード / mailto / tel を使いたい | a タグ | ブラウザ標準の動作が必要 |
Link
Next.jsでアプリケーション内のリンクを作りたい時は最初に Link を使うべき
import Link from "next/link";
<Link href="/dashboard">Dashboard</Link>;
使いどころ
アプリケーション内のページ遷移
詳細
- ページ内を高速で移動できる(SPAの切り替えみたいなイメージ）
- Props（prefetch）を指定するとが事前に次のページを読み込める
- Next.js側がよしなに色々やってくれる(ページのキャッシュなど）
router.push
「クリックしたら即遷移」ではなく
“何か処理をした後に遷移” させたい場面では router.push を使う
"use client";
import { useRouter } from "next/navigation";
const router = useRouter();
router.push("/dashboard");
使いどころ
アプリケーション内のページ遷移
詳細
- ボタンクリックした時などイベントハンドラ内での遷移ができる
- ロジック内で遷移したい時に使う
a タグ
外部サイトへ遷移するときは a タグを使う。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Example
</a>
使いどころ
外部へのページ遷移
詳細
- html標準の機能
- 自分のアプリからTwitterへのリンクなど外部サイトへのリンクで使う
- PDFやCSVなどのダウンロード機能を作る時にも使える
-
target="_blank"を指定すれば別タブで開くことができる
まとめ
- 内部リンク
- Link
- router.push(ロジック内で遷移したい時）
- 外部リンク
- aタグ
と覚えましょうwindow.location.hrefでも遷移はできますが、ブラウザでポップアップブロックの設定が有効になってると弾かれて表示できないパターンがあるのであんまり使わない方がいいかも。