// Optimized Navigation on the Product List Page
<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 Basic Usage of Components
// ============================================

import Link from "next/link";

export default function Navigation() {
  return (
    <nav className="flex gap-6 p-4 bg-white shadow-sm">
      {/* Basic Navigation */}
      <Link href="/" className="text-blue-600 hover:underline">
        Home
      </Link>

      {/* Dynamic Routing */}
      <Link href="/products/42" className="text-blue-600 hover:underline">
        Product 42
      </Link>

      {/* With query parameters */}
      <Link
        href="/products?category=electronics&sort=price"
        className="text-blue-600 hover:underline"
      >
        Electronics
      </Link>

      {/* Complete 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.

Browser Display 4 A blue link:
Home → / 
Product 42 → /products/42
Electronics → /products?category=electronics&sort=price
Help Center → https://help.example.com(External Links)

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

// ============================================
// Control Link Prefetch Behavior
// ============================================

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>

      {/* Default prefecth:viewport Automatically preload links within the page */}
      {products.map(p => (
        <Link
          key={p.id}
          href={`/products/${p.id}`}
          className="block p-4 border-b hover:bg-gray-50"
        >
          {p.name}
        </Link>
      ))}

      {/* Turn off prefetching:Suitable for pages that aren't used very often */}
      <Link
        href="/archive"
        prefetch={false}
        className="block mt-4 text-gray-500"
      >
        View Archive (older products)
      </Link>

      {/* Forced Prefetch:Suitable for the next page you're about to visit */}
      <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

After the page loads，This can be observed in the network console.:
1. /products/1, /products/2, /products/3 Pre-fetched (within the viewport)
2. /archive Not pre-fetched(prefetch={false})
3. /checkout Pre-fetched(prefetch={true}，Even when not there viewport)

When a user clicks the link:
- Pre-fetched pages → Real-time Display(Read from cache)
- Pages Not Prefetched → Displayed after the network request

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

// ============================================
// Product List + Modal Window:scroll=false Keep the list in place
// Users click on a product to view its details，The list does not scroll when returning
// ============================================

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. The user has scrolled to the 3 Items per Page(Scrolled down 2000px)
2. Click on the 15 Go to the product details page
3. Click the browser's Back button
4. Back to the list page，Keep the scroll position at 2000px(No "Back to Top")
5. Comparison:If not scroll={false}，Return to the top each time

The component renders the described UI in the browser.

// ============================================
// replace Replacement History:You cannot return to the form page after submitting.
// ============================================

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>

      {/* Usage replace:Once submitted, you cannot return to this page. */}
      <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

User Flow:
1. Home → Shopping Cart → Checkout → Confirmation Page
2. Tap on the checkout page "Place Order"
3. The browser address changes to /order-confirmation
4. The user clicks the Back button
5. Skip the checkout page，Go directly to the shopping cart page
6. Prevent users from accidentally returning to the checkout page and submitting the order again

Diagram of client-side navigation using Link component.

// ============================================
// useRouter Complete Example of Programmatic Navigation
// ============================================

'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:Go to the Home Page */}
        <button
          onClick={() => router.push("/")}
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          Home
        </button>

        {/* push:Dynamic Routing */}
        <button
          onClick={() => router.push(`/users/${userId}`)}
          className="px-4 py-2 bg-gray-600 text-white rounded"
        >
          Profile
        </button>

        {/* replace:Replace the current page */}
        <button
          onClick={() => router.replace("/login")}
          className="px-4 py-2 bg-red-600 text-white rounded"
        >
          Logout
        </button>

        {/* back/forward:Browsing History */}
        <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:Refresh this page(Server-Side Re-rendering) */}
        <button
          onClick={() => router.refresh()}
          className="px-4 py-2 border rounded"
        >
          Refresh ↻
        </button>
      </div>
    </div>
  );
}

NavigationBar renders its UI.

Click each button:
[Home]    → Navigate to /
[Profile] → Navigate to /users/123
[Logout]  → Replace the current history with /login(No Return)
[← Back]  → Browser Back Button
[Forward] → Browser Forward
[Refresh] → Refresh this page(RSC Render Again，Does not cause the entire page to reload)

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

// ============================================
// Form Submission:Verification → save → Programmatic Navigation
// ============================================

'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 {
      // Simulation API Call
      await new Promise(resolve => setTimeout(resolve, 1500));
      // After successful completion, navigate to the new project page
      router.push("/projects/42");
      // and refresh the data cache
      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. Users enter the project name and description
2. Click the "Create Project" button
3. The button changes to "Creating..."(Disabled)
4. After 1.5s (simulated API delay)
5. Page Navigation to /projects/42
6. Refresh Project List Data(Includes newly created projects)

// ============================================
// Comprehensive Example:A Comprehensive Navigation System for E-commerce
// Covering Link、useRouter、redirect、Navigation Loading State
// ============================================

// src/app/layout.tsx — Global Navigation Bar
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 — Product Details(Includes navigation logic)
'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 }),
    });
    // Refresh the quantity in the shopping cart after adding an item
    router.refresh();
  }

  async function handleBuyNow() {
    await fetch("/api/cart", {
      method: "POST",
      body: JSON.stringify({ productId: params.id, quantity: 1 }),
    });
    // Buy Now → Proceed to Checkout (use replace to avoid returning to the product page)
    router.replace("/checkout");
  }

  return (
    <div>
      {/* Breadcrumb Navigation */}
      <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 — Shopping Cart Quantity Display
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>
  );
}

Navigation Bar(Fixed at the top):
[ShopHub]  Products  Categories  Deals  About  [Search]  Cart(3)  [Sign In]

Product Details Page(/products/1):
Home / Products / 1
[Product Images]  [Product Details]
            Product #1
            $49.99
            [Add to Cart] [Buy Now]
            ← Previous Product | Next Product →

Navigation Behavior:
- Click Products → Soft Nav，Instant Page Switching
- Click Deals → No advance pickup(prefetch=false)，But navigation is still fast
- Add to Cart → router.refresh()，Shopping Cart Logo Update
- Buy Now → router.replace("/checkout")，Replacement History