Next.js: ナビゲーション: Link とプログラム API

// 最適化された商品一覧ページのナビゲーション
<Link
  href={`/products/${product.id}`}
  prefetch={true}
  scroll={false}
  className="block p-4 border rounded hover:shadow"
>
  {product.title}
</Link>

Diagram of client-side navigation using Link component.

// ============================================
// Link コンポーネントの基本的な使い方
// ============================================

import Link from "next/link";

export default function Navigation() {
  return (
    <nav className="flex gap-6 p-4 bg-white shadow-sm">
      {/* 基本ナビゲーション */}
      <Link href="/" className="text-blue-600 hover:underline">
        Home
      </Link>

      {/* 動的ルーティング */}
      <Link href="/products/42" className="text-blue-600 hover:underline">
        Product 42
      </Link>

      {/* クエリパラメータ付き */}
      <Link
        href="/products?category=electronics&sort=price"
        className="text-blue-600 hover:underline"
      >
        Electronics
      </Link>

      {/* 完全な URL */}
      <Link
        href="https://help.example.com"
        className="text-blue-600 hover:underline"
      >
        Help Center
      </Link>
    </nav>
  );
}

Renders: Navigation links using Next.js Link component for client-side routing.

ブラウザに4つの青いリンクが表示:
Home → / 
Product 42 → /products/42
Electronics → /products?category=electronics&sort=price
Help Center → https://help.example.com (外部リンク)

The page renders as described above, with the UI updating based on the described behavior.

// ============================================
// Link のプリフェッチ動作を制御
// ============================================

import Link from "next/link";

export default function ProductList() {
  const products = [
    { id: 1, name: "Wireless Mouse" },
    { id: 2, name: "Keyboard" },
    { id: 3, name: "Monitor" },
  ];

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Products</h1>

      {/* デフォルト prefetch: ビューポート内のリンクを自動プリロード */}
      {products.map(p => (
        <Link
          key={p.id}
          href={`/products/${p.id}`}
          className="block p-4 border-b hover:bg-gray-50"
        >
          {p.name}
        </Link>
      ))}

      {/* プリフェッチをオフ: あまり使わないページ向け */}
      <Link
        href="/archive"
        prefetch={false}
        className="block mt-4 text-gray-500"
      >
        View Archive (older products)
      </Link>

      {/* 強制プリフェッチ: 次に訪問するページ向け */}
      <Link
        href="/checkout"
        prefetch={true}
        className="block mt-4 px-6 py-2 bg-blue-600 text-white text-center rounded"
      >
        Proceed to Checkout
      </Link>
    </div>
  );
}

Maps over products to render list.
Content: Products

ページが読み込まれた後、ネットワークコンソールで観察:
1. /products/1、/products/2、/products/3 がプリフェッチされる (ビューポート内)
2. /archive はプリフェッチされない (prefetch={false})
3. /checkout がプリフェッチされる (prefetch={true}、ビューポート外でも)

ユーザーがリンクをクリックした場合:
- プリフェッチ済みページ → 即時表示 (キャッシュから読み取り)
- プリフェッチされていないページ → ネットワークリクエスト後に表示

Diagram: Navigation Trigger; Scroll to the top of the new page; Keep the current scroll position.

// ============================================
// 商品一覧 + モーダルウィンドウ: scroll=false で一覧位置を維持
// ユーザーが商品をクリックして詳細を表示、戻ったときに一覧がスクロールしない
// ============================================

import Link from "next/link";

export default function ProductGrid() {
  const products = Array.from({ length: 20 }, (_, i) => ({
    id: i + 1,
    name: `Product ${i + 1}`,
  }));

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-6">Product Catalog</h1>
      <div className="grid grid-cols-4 gap-4">
        {products.map(p => (
          <Link
            key={p.id}
            href={`/products/${p.id}`}
            scroll={false}
            className="border p-4 rounded hover:shadow-lg"
          >
            <div className="h-32 bg-gray-100 rounded" />
            <p className="mt-2 font-medium">{p.name}</p>
          </Link>
        ))}
      </div>
    </div>
  );
}

Maps over products to render list.
Content: Product Catalog

1. ユーザーが3ページ目までスクロール (2000px 下方にスクロール)
2. 15番目の商品をクリックして商品詳細ページへ
3. ブラウザの戻るボタンをクリック
4. 一覧ページに戻り、スクロール位置が 2000px に保持される (「先頭に戻る」なし)
5. 比較: scroll={false} なしの場合、毎回先頭に戻る

The component renders the described UI in the browser.

// ============================================
// replace で履歴を置換: 送信後にフォームページに戻れないようにする
// ============================================

import Link from "next/link";

export default function CheckoutPage() {
  return (
    <div className="max-w-md mx-auto p-8">
      <h1 className="text-2xl font-bold mb-6">Checkout</h1>

      <div className="space-y-4">
        <input placeholder="Card number" className="w-full p-3 border rounded" />
        <input placeholder="Expiry date" className="w-full p-3 border rounded" />
        <input placeholder="CVV" className="w-full p-3 border rounded" />
      </div>

      {/* replace を使用: 送信後、このページに戻れなくなる */}
      <Link
        href="/order-confirmation"
        replace
        className="block mt-6 w-full p-3 bg-blue-600 text-white text-center rounded"
      >
        Place Order
      </Link>

      <p className="text-sm text-gray-500 mt-2 text-center">
        After placing order, back button will skip this page
      </p>
    </div>
  );
}

Content: Checkout | Place Order | After placing order, back button wi

ユーザーフロー:
1. ホーム → ショッピングカート → チェックアウト → 確認ページ
2. チェックアウトページで「Place Order」をタップ
3. ブラウザのアドレスが /order-confirmation に変わる
4. ユーザーが戻るボタンをクリック
5. チェックアウトページをスキップして、ショッピングカートページに直接移動
6. ユーザーが誤ってチェックアウトページに戻って再度注文するのを防止

Diagram of client-side navigation using Link component.

// ============================================
// useRouter プログラムナビゲーションの完全な例
// ============================================

'use client';

import { useRouter } from "next/navigation";

export default function NavigationBar({ userId }: { userId: string }) {
  const router = useRouter();

  return (
    <div className="p-4 bg-white shadow-sm">
      <div className="flex gap-4 max-w-4xl mx-auto">
        {/* push: ホームページに移動 */}
        <button
          onClick={() => router.push("/")}
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          Home
        </button>

        {/* push: 動的ルーティング */}
        <button
          onClick={() => router.push(`/users/${userId}`)}
          className="px-4 py-2 bg-gray-600 text-white rounded"
        >
          Profile
        </button>

        {/* replace: 現在のページを置換 */}
        <button
          onClick={() => router.replace("/login")}
          className="px-4 py-2 bg-red-600 text-white rounded"
        >
          Logout
        </button>

        {/* back/forward: 閲覧履歴 */}
        <button
          onClick={() => router.back()}
          className="px-4 py-2 border rounded"
        >
          ← Back
        </button>
        <button
          onClick={() => router.forward()}
          className="px-4 py-2 border rounded"
        >
          Forward →
        </button>

        {/* refresh: このページを更新 (サーバーサイド再レンダリング) */}
        <button
          onClick={() => router.refresh()}
          className="px-4 py-2 border rounded"
        >
          Refresh ↻
        </button>
      </div>
    </div>
  );
}

NavigationBar renders its UI.

各ボタンをクリック:
[Home]    → / にナビゲート
[Profile] → /users/123 にナビゲート
[Logout]  → 現在の履歴を /login で置換 (戻れない)
[← Back]  → ブラウザの戻るボタン
[Forward] → ブラウザの進むボタン
[Refresh] → このページを更新 (RSC 再レンダリング、ページ全体のリロードは発生しない)

The page renders as described above, with the UI updating based on the described behavior.

// ============================================
// フォーム送信: 検証 → 保存 → プログラムナビゲーション
// ============================================

'use client';

import { useRouter } from "next/navigation";
import { useState } from "react";

export default function CreateProjectForm() {
  const router = useRouter();
  const [saving, setSaving] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);

    try {
      // API 呼び出しをシミュレート
      await new Promise(resolve => setTimeout(resolve, 1500));
      // 成功後、新しいプロジェクトページにナビゲート
      router.push("/projects/42");
      // データキャッシュをリフレッシュ
      router.refresh();
    } catch (err) {
      console.error("Failed to create project:", err);
      alert("Failed to create project. Please try again.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="max-w-lg mx-auto p-8 space-y-4">
      <h1 className="text-2xl font-bold">Create Project</h1>
      <input
        name="name"
        placeholder="Project name"
        className="w-full p-3 border rounded"
        required
      />
      <textarea
        name="description"
        placeholder="Description"
        className="w-full p-3 border rounded h-32"
      />
      <button
        type="submit"
        disabled={saving}
        className="w-full p-3 bg-blue-600 text-white rounded disabled:opacity-50"
      >
        {saving ? "Creating..." : "Create Project"}
      </button>
    </form>
  );
}

Form with: name.
Content: Create Project

1. ユーザーがプロジェクト名と説明を入力
2. "Create Project" ボタンをクリック
3. ボタンが "Creating..." に変わる (無効化)
4. 1.5秒後 (シミュレートされた API 遅延)
5. ページが /projects/42 にナビゲート
6. プロジェクト一覧データがリフレッシュされる (新規作成されたプロジェクトを含む)

// ============================================
// 総合例: e コマースの包括的なナビゲーションシステム
// Link、useRouter、redirect、ナビゲーションローディング状態をカバー
// ============================================

// src/app/layout.tsx — グローバルナビゲーションバー
import Link from "next/link";
import { CartCount } from "./CartCount";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header className="bg-white shadow-sm sticky top-0 z-40">
          <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
            <Link href="/" className="text-2xl font-bold text-blue-600">
              ShopHub
            </Link>

            <nav className="hidden md:flex gap-6">
              <Link href="/products" className="hover:text-blue-600">
                Products
              </Link>
              <Link href="/categories" className="hover:text-blue-600">
                Categories
              </Link>
              <Link href="/deals" prefetch={false} className="hover:text-blue-600">
                Deals
              </Link>
              <Link href="/about" className="hover:text-blue-600">
                About
              </Link>
            </nav>

            <div className="flex items-center gap-4">
              <Link href="/search" className="text-gray-600 hover:text-blue-600">
                Search
              </Link>
              <Link href="/cart" className="relative text-gray-600 hover:text-blue-600">
                Cart
                <CartCount />
              </Link>
              <Link
                href="/account"
                className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm"
              >
                Sign In
              </Link>
            </div>
          </div>
        </header>

        <main className="max-w-6xl mx-auto px-4 py-8">
          {children}
        </main>
      </body>
    </html>
  );
}

// src/app/products/[id]/page.tsx — 商品詳細 (ナビゲーションロジックを含む)
'use client';
import { useRouter } from "next/navigation";
import Link from "next/link";

export default function ProductDetail({ params }) {
  const router = useRouter();

  async function handleAddToCart() {
    await fetch("/api/cart", {
      method: "POST",
      body: JSON.stringify({ productId: params.id }),
    });
    // カートに追加後、カート内の数量をリフレッシュ
    router.refresh();
  }

  async function handleBuyNow() {
    await fetch("/api/cart", {
      method: "POST",
      body: JSON.stringify({ productId: params.id, quantity: 1 }),
    });
    // 今すぐ購入 → チェックアウトに進む (replace で商品ページに戻れないようにする)
    router.replace("/checkout");
  }

  return (
    <div>
      {/* パンくずナビゲーション */}
      <nav className="text-sm text-gray-500 mb-6">
        <Link href="/" className="hover:text-blue-600">Home</Link>
        <span className="mx-2">/</span>
        <Link href="/products" className="hover:text-blue-600">Products</Link>
        <span className="mx-2">/</span>
        <span className="text-gray-900">{params.id}</span>
      </nav>

      <div className="flex gap-8">
        <div className="w-1/2">
          <img
            src={`https://picsum.photos/seed/${params.id}/400/400`}
            alt="Product"
            className="w-full rounded-lg"
          />
        </div>
        <div className="w-1/2">
          <h1 className="text-3xl font-bold">Product #{params.id}</h1>
          <p className="text-2xl text-green-600 font-bold mt-4">$49.99</p>
          <p className="text-gray-600 mt-4">
            High-quality product with premium features.
          </p>

          <div className="flex gap-4 mt-8">
            <button
              onClick={handleAddToCart}
              className="flex-1 px-6 py-3 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50"
            >
              Add to Cart
            </button>
            <button
              onClick={handleBuyNow}
              className="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
            >
              Buy Now
            </button>
          </div>

          <div className="mt-8 border-t pt-6">
            <Link
              href={`/products/${Number(params.id) - 1}`}
              scroll={false}
              className="text-blue-600 hover:underline"
            >
              ← Previous Product
            </Link>
            <Link
              href={`/products/${Number(params.id) + 1}`}
              scroll={false}
              className="text-blue-600 hover:underline float-right"
            >
              Next Product →
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

// src/app/CartCount.tsx — ショッピングカート数量表示
export async function CartCount() {
  const cart = await fetch("https://api.example.com/cart");
  const itemCount = cart?.items?.length ?? 0;

  if (itemCount === 0) return null;

  return (
    <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
      {itemCount}
    </span>
  );
}

ナビゲーションバー (上部固定):
[ShopHub]  Products  Categories  Deals  About  [Search]  Cart(3)  [Sign In]

商品詳細ページ (/products/1):
Home / Products / 1
[商品画像]  [商品詳細]
            Product #1
            $49.99
            [Add to Cart] [Buy Now]
            ← Previous Product | Next Product →

ナビゲーション動作:
- Products をクリック → ソフトナビ、瞬時にページ切り替え
- Deals をクリック → 事前プリフェッチなし (prefetch=false)、ただしナビゲーションは依然高速
- カートに追加 → router.refresh()、カートアイコン更新
- 今すぐ購入 → router.replace("/checkout")、履歴を置換