Routing

import Link from "next/link";
import "./globals.css";

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        <nav id="site-nav">
          <Link href="/">Home</Link> · <Link href="/shop">Shop</Link> ·{" "}
          <Link href="/shop/shirts">Shirts</Link> · <Link href="/shop/hats">Hats</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

export default function HomePage() {
  return <h1>Home</h1>;
}

"use client";

import { useState } from "react";

export function CartCounter() {
  const [items, setItems] = useState(0);
  return (
    <button id="add" onClick={() => setItems(items + 1)}>
      Cart: {items}
    </button>
  );
}

export default function ShopPage() {
  return <h1>All products</h1>;
}

export default function ShirtsPage() {
  return <h1 id="shirts">Shirts</h1>;
}

export default function HatsPage() {
  return <h1 id="hats">Hats</h1>;
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /shop
├ ○ /shop/hats
└ ○ /shop/shirts


○  (Static)  prerendered as static content

on /shop/shirts      cart "Cart: 3"   h1s: Shirts
click Hats  → /shop/hats    cart "Cart: 3"   same #shop-layout node (marker kept)   h1s: Hats, Shirts (hidden)
             network requests for the click: none (the static page was already prefetched)
click Home  → /             #shop-layout still in the DOM, not visible            h1s: Home, Hats (hidden), Shirts (hidden)
click Shirts → /shop/shirts cart "Cart: 3"   same #shop-layout node (marker kept)   h1s: Shirts, Hats (hidden), Home (hidden)

on /shop/shirts      cart "Cart: 3"   h1s: Shirts
click Hats  → /shop/hats    cart "Cart: 3"   same #shop-layout node   h1s: Hats
click Home  → /             #shop-layout not in the DOM               h1s: Home
click Shirts → /shop/shirts cart "Cart: 0"   a new #shop-layout node  h1s: Shirts

import "./globals.css";
import { NavLinks } from "./ui/nav-links";

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        <NavLinks />
        {children}
      </body>
    </html>
  );
}

import { GoButtons } from "./ui/go-buttons";

export default function HomePage() {
  return (
    <main>
      <h1>Home</h1>
      <GoButtons />
    </main>
  );
}

"use client";

import { useRouter } from "next/navigation";

export function GoButtons() {
  const router = useRouter();
  return (
    <p>
      <button id="push" onClick={() => router.push("/about")}>push /about</button>
      <button id="replace" onClick={() => router.replace("/about")}>replace /about</button>
      <button id="back" onClick={() => router.back()}>back</button>
    </p>
  );
}

import { GoButtons } from "../ui/go-buttons";

export default function AboutPage() {
  return (
    <main>
      <h1>About</h1>
      <GoButtons />
    </main>
  );
}

import Link from "next/link";

export function generateStaticParams() {
  return [{ id: "one" }, { id: "two" }];
}

export default async function ArticlePage({ params }: PageProps<"/articles/[id]">) {
  const { id } = await params;
  return (
    <main>
      <h1>Article {id}</h1>
      <div style={{ height: 3000 }}>A long article…</div>
      <Link href="/articles/two" id="next">Next article</Link>{" "}
      <Link href="/articles/two" scroll={false} id="next-keep-scroll">Next article (scroll=false)</Link>
    </main>
  );
}

import { redirect } from "next/navigation";

export default function OldTeamPage() {
  redirect("/about");
}

import { permanentRedirect } from "next/navigation";

export default function OldBlogPage() {
  permanentRedirect("/articles/one");
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /about
├   /articles/[id]
│ ├ ◐ /articles/[id]
│ ├ ○ /articles/one
│ └ ○ /articles/two
├ ○ /old-blog
└ ○ /old-team


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

load /                                   history 2   same document
Link About (push)            → /about    history 3   same document
router.back()                → /         history 3
Link About (replace)         → /about    history 3   (the / entry was overwritten)
Link Home                    → /         history 3
router.push('/about')        → /about    history 4
Link Home                    → /         history 5
router.replace('/about')     → /about    history 5
router.back()                → /about    (the entry before was the pushed /about)
Link Old team page           → /about    history +1, /old-team never appears; back → /
on /articles/one, scrollY 2260
Link Next article            → /articles/two   scrollY 0
Link Next article scroll={false} → /articles/two   scrollY 2260
plain <a href="/about">      → /about    NOT the same document; network: GET /about (Document)

HTTP/1.1 307 Temporary Redirect
x-nextjs-cache: HIT
x-nextjs-prerender: 1
location: /about
Cache-Control: s-maxage=31536000

HTTP/1.1 308 Permanent Redirect
x-nextjs-cache: HIT
x-nextjs-prerender: 1
location: /articles/one
Cache-Control: s-maxage=31536000

"use client";

import { useParams } from "next/navigation";

export function ShareButton() {
  const { slug } = useParams<{ slug: string }>();
  return <button id="share">Share “{slug}”</button>;
}

export default function ArchivePage() {
  return <h1>Blog archive</h1>;
}

import { Suspense } from "react";

export default function DocsPage({ params }: PageProps<"/docs/[...slug]">) {
  return (
    <main>
      <h1>Docs</h1>
      <Suspense fallback={<p>Loading breadcrumbs…</p>}>
        <Breadcrumbs params={params} />
      </Suspense>
    </main>
  );
}

async function Breadcrumbs({ params }: Pick<PageProps<"/docs/[...slug]">, "params">) {
  const { slug } = await params;
  return (
    <p id="crumbs">
      slug = {JSON.stringify(slug)} → {slug.join(" / ")}
    </p>
  );
}

import { Suspense } from "react";

export default function ShopPage({ params }: PageProps<"/shop/[[...filters]]">) {
  return (
    <main>
      <h1>Shop</h1>
      <Suspense fallback={<p>Loading filters…</p>}>
        <ActiveFilters params={params} />
      </Suspense>
    </main>
  );
}

async function ActiveFilters({ params }: Pick<PageProps<"/shop/[[...filters]]">, "params">) {
  const { filters } = await params;
  return <p id="filters">filters = {filters === undefined ? "undefined" : JSON.stringify(filters)}</p>;
}

Route (app)
┌ ○ /_not-found
├   /blog/[slug]
│ ├ ◐ /blog/[slug]
│ ├ ○ /blog/hello-world
│ └ ○ /blog/routing
├ ○ /blog/archive
├   /docs/[...slug]
│ └ ◐ /docs/[...slug]
└   /shop/[[...filters]]
  └ ◐ /shop/[[...filters]]


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

/docs/a                                 Docs · Loading breadcrumbs… · slug = ["a"] → a
/docs/getting-started/install/macos     Docs · Loading breadcrumbs… · slug = ["getting-started","install","macos"] → getting-started / install / macos
/docs                                   404 Not Found (a catch-all needs at least one segment)
/shop                                   Shop · Loading filters… · filters = undefined
/shop/shoes/red                         Shop · Loading filters… · filters = ["shoes","red"]
/blog/hello-world                       Post: hello-world · Share “hello-world”
/blog/archive                           Blog archive
/docs/hello%20world/caf%C3%A9           slug = ["hello%20world","caf%C3%A9"]

request 1   HTTP/1.1 200 OK
            x-nextjs-prerender: 1
            x-nextjs-postponed: 1
            Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate
request 2   HTTP/1.1 200 OK
            x-nextjs-cache: HIT
            x-nextjs-prerender: 1
            Cache-Control: s-maxage=31536000

export default async function DocsPage({ params }: PageProps<"/docs/[...slug]">) {
  const { slug } = await params;
  return (
    <main>
      <h1>Docs</h1>
      <p>{slug.join(" / ")}</p>
    </main>
  );
}

Error: Route "/docs/[...slug]": Next.js encountered uncached or runtime data during prerendering.

`fetch(...)`, `cookies()`, `headers()`, `params`, `searchParams`, or `connection()` accessed outside of `<Suspense>` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.

Ways to fix this:
  - [stream] Provide a placeholder with `<Suspense fallback={...}>` around the data access
  - [cache] For uncached data (`fetch`, database calls): cache the access with `"use cache"` (does not apply to `connection()`)
  - [block] Set `export const instant = false` to allow a blocking route

import Link from "next/link";
import "./globals.css";

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        <nav>
          <Link href="/">Home</Link> <Link href="/about">About</Link> <Link href="/cart">Cart</Link>{" "}
          <Link href="/account">Account</Link> <Link href="/checkout">Checkout</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

"use client";

import { useState } from "react";

export function CartBadge() {
  const [count, setCount] = useState(0);
  return <button id="badge" onClick={() => setCount(count + 1)}>{count} in cart</button>;
}

export default function CartPage() {
  return <h1>Cart</h1>;
}

export default function AccountPage() {
  return <h1>Account</h1>;
}

export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <div id="marketing-shell">
      <header>Marketing section</header>
      {children}
    </div>
  );
}

export default function HomePage() {
  return <h1>Home</h1>;
}

export default function AboutPage() {
  return <h1>About</h1>;
}

export default function CheckoutPage() {
  return <h1>Checkout</h1>;
}

export default function DraftPage() {
  return <h1>This is never routable</h1>;
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /about
├ ○ /account
├ ○ /cart
└ ○ /checkout


○  (Static)  prerendered as static content

/cart       headers: nav, "Shop section · 2 in cart"   h1: Cart
→ /account  headers: nav, "Shop section · 2 in cart"   h1: Account    documents requested: none
→ /about    headers: nav, "Marketing section"          h1: About      documents requested: none
→ /checkout headers: nav                               h1: Checkout   documents requested: none
→ /cart     headers: nav, "Shop section · 2 in cart"   h1: Cart       documents requested: none

curl -s -o /dev/null -w '%{http_code}' http://localhost:4502/_drafts       → 404
curl -s -o /dev/null -w '%{http_code}' 'http://localhost:4502/(shop)/cart' → 404

import Link from "next/link";
import "../globals.css";
import { CartBadge } from "./_components/cart-badge";

export default function ShopRootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="shop">
        <nav>
          Shop · <CartBadge /> · <Link href="/cart">Cart</Link> <Link href="/account">Account</Link>{" "}
          <Link href="/about">About (marketing)</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

import Link from "next/link";
import "../globals.css";

export default function MarketingRootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="marketing">
        <nav>
          Marketing · <Link href="/">Home</Link> <Link href="/about">About</Link>{" "}
          <Link href="/cart">Cart (shop)</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

/cart (badge clicked twice)   body.shop        "Shop · 2 in cart"
→ /account                    same document    "Shop · 2 in cart"   documents requested: none
→ /about (marketing)          NEW document     body.marketing       documents requested: /about
→ /                           (soft)           body.marketing       documents requested: none
→ /cart (shop)                NEW document     "Shop · 0 in cart"   documents requested: /cart

import { connection } from "next/server";

async function getRevenue() {
  await new Promise((resolve) => setTimeout(resolve, 2000)); // a slow query
  return 48200;
}

export default async function DashboardPage() {
  await connection(); // this page must render per request
  const revenue = await getRevenue();
  return <h1 id="revenue">Revenue: ${revenue.toLocaleString("en-US")}</h1>;
}

import Link from "next/link";

export default function DashboardLayout({ children }: LayoutProps<"/dashboard">) {
  return (
    <section>
      <aside id="dash-nav">
        <Link href="/dashboard">Overview</Link> · <Link href="/dashboard/settings">Settings</Link>
      </aside>
      {children}
    </section>
  );
}

export default function SettingsPage() {
  return <h1>Settings</h1>;
}

import Link from "next/link";

export default function HomePage() {
  return (
    <main>
      <h1>Home</h1>
      <Link href="/dashboard" id="to-dashboard">Open the dashboard</Link>
    </main>
  );
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ◐ /dashboard
└ ○ /dashboard/settings


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

   49ms  HTTP 200  content-type: text/html; charset=utf-8
         cache-control: private, no-cache, no-store, max-age=0, must-revalidate   x-nextjs-postponed: 1
   50ms  chunk 1     1886 bytes  contains: id="skeleton", id="dash-nav"
   51ms  chunks 2–10 (scripts, the RSC payload of the shell)
 2052ms  chunk 11     128 bytes
 2052ms  chunk 12      73 bytes
 2052ms  chunk 13    1161 bytes  contains: id="revenue"
 2052ms  chunk 14      14 bytes  contains: </html>
2053ms  end of response, 14336 bytes

…<aside id="dash-nav">…</aside><!--$?--><template id="B:0"></template><p id="skeleton">Loading dashboard…</p><!--/$-->…
…<div hidden id="S:1"><h1 id="revenue">Revenue: $<!-- -->48,200</h1></div><script>…</script>…</body></html>

prefetch  GET /dashboard?_rsc=…  next-router-prefetch: 1  next-router-segment-prefetch: /_tree
prefetch  GET /dashboard?_rsc=…  next-router-prefetch: 1  next-router-segment-prefetch: /dashboard/__PAGE__

click +30ms    /dashboard  visible: "Loading dashboard…"
click +500ms   /dashboard  visible: "Loading dashboard…"
click +1500ms  /dashboard  visible: "Loading dashboard…"
click +2600ms  /dashboard  visible: "Revenue: $48,200"
request   GET /dashboard?_rsc=…  rsc: 1  next-router-state-tree: […]   (no prefetch header: the real render)

Settings           /dashboard/settings  visible: "Settings"   (static, prefetched: instant)
Overview +30ms     /dashboard  visible: "Loading dashboard…"
Overview +1000ms   /dashboard  visible: "Loading dashboard…"
Overview +2600ms   /dashboard  visible: "Revenue: $48,200"

export default function PostNotFound() {
  return <h1 id="post-404">No such post</h1>;
}

const posts: Record<string, { title: string }> = {
  hello: { title: "Hello, world" },
  routing: { title: "Routing in the App Router" },
};

export function getPost(slug: string) {
  return posts[slug];
}

import { Suspense } from "react";
import { notFound } from "next/navigation";

export default function ProductPage({ params }: PageProps<"/products/[id]">) {
  return (
    <main>
      <h1>Product</h1>
      <Suspense fallback={<p>Loading product…</p>}>
        <ProductDetails params={params} />
      </Suspense>
    </main>
  );
}

async function ProductDetails({ params }: Pick<PageProps<"/products/[id]">, "params">) {
  const { id } = await params;
  if (id !== "1") notFound();
  return <p id="details">Product 1: a blue mug</p>;
}

import { Suspense } from "react";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

export default function AccountPage() {
  return (
    <main>
      <h1>Account</h1>
      <Suspense fallback={<p>Checking your session…</p>}>
        <AccountDetails />
      </Suspense>
    </main>
  );
}

async function AccountDetails() {
  const session = (await cookies()).get("session")?.value;
  if (!session) redirect("/login");
  return <p id="account">Signed in as {session}</p>;
}

export default function LoginPage() {
  return <h1>Log in</h1>;
}

import Link from "next/link";

export default function NotFound() {
  return (
    <main>
      <h1 id="root-404">Page not found</h1>
      <Link href="/">Go home</Link>
    </main>
  );
}

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
  async redirects() {
    return [
      { source: "/blog/:slug", destination: "/posts/:slug", permanent: true },
      { source: "/sale", destination: "/products/1", permanent: false },
    ];
  },
};

export default nextConfig;

Route (app)
┌ ○ /_not-found
├ ◐ /account
├ ○ /login
├   /posts/[slug]
│ ├ ◐ /posts/[slug]
│ ├ ○ /posts/hello
│ └ ○ /posts/routing
└   /products/[id]
  └ ◐ /products/[id]


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

/posts/hello            200  x-nextjs-cache: HIT                    <h1>Hello, world
/posts/missing  (1st)   200  x-nextjs-postponed: 1, no-store        <meta name="robots" content="noindex">
/posts/missing  (2nd)   404  x-nextjs-cache: HIT                    <meta name="robots" content="noindex">
/products/1             200  x-nextjs-postponed: 1                  Product · Loading product… · Product 1: a blue mug
/products/2             200  x-nextjs-postponed: 1                  Product · Loading product… · <meta name="robots" content="noindex">
/account   (no cookie)  200  x-nextjs-postponed: 1                  Account · Checking your session…
                                                                    <meta id="__next-page-redirect" http-equiv="refresh" content="1;url=/login">
/account   (session=rohit)  200                                     Account · Checking your session… · Signed in as rohit
/nowhere                404                                         <meta name="robots" content="noindex"> · Page not found
/blog/hello             308  location: /posts/hello                 (from next.config.ts)
/sale                   307  location: /products/1                  (from next.config.ts)

Chrome  /posts/missing4  visible: "No such post"     robots: noindex
Chrome  /products/2      visible: "Page not found"   robots: noindex
Chrome  /account         ended on /login, visible: "Log in"
Chrome  /nowhere         visible: "Page not found"   robots: noindex

export default function DashboardHome() {
  return <p>children: dashboard home</p>;
}

export default function DashboardDefault() {
  return <p>children: default.tsx</p>;
}

export default function TeamPage() {
  return <p>team: 4 members</p>;
}

export default function TeamSettingsPage() {
  return <p>team: settings form</p>;
}

export default function TeamDefault() {
  return <p>team: default.tsx</p>;
}

import { connection } from "next/server";

export default async function AnalyticsPage() {
  await connection();
  await new Promise((resolve) => setTimeout(resolve, 1500)); // a slow analytics query
  return <p id="visits">analytics: 1,204 visits today</p>;
}

export default function AnalyticsLoading() {
  return <p>analytics: loading…</p>;
}

export default function AnalyticsDefault() {
  return <p>analytics: default.tsx</p>;
}

Route (app)
┌ ○ /_not-found
├ ◐ /dashboard
└ ○ /dashboard/settings


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

load /dashboard            children=[dashboard home]  team=[4 members]       analytics=[1,204 visits today]
Link → /dashboard/settings children=[dashboard home]  team=[settings form]   analytics=[1,204 visits today]
reload /dashboard/settings children=[default.tsx]     team=[settings form]   analytics=[default.tsx]
Link → /dashboard  +300ms  children=[dashboard home]  team=[4 members]       analytics=[loading…]
Link → /dashboard  +2.3s   children=[dashboard home]  team=[4 members]       analytics=[1,204 visits today]

GET /dashboard     29ms  first chunk: "team: 4 members", "children: dashboard home", "analytics: loading…"
                 1534ms  chunk with id="visits", then </html>

Error: Parallel route slots cannot render the same URLs
The following layouts have parallel route slots that cannot render the same URLs:
app/dashboard/layout.tsx
- /dashboard/settings is missing a matching page or default.tsx in @analytics

Every URL matched by one slot must have a matching page or default.tsx in every sibling slot.

Error: Unmatched app pages
The following page files do not match any complete route:
- app/dashboard/@team/settings/page.tsx

import { Suspense } from "react";
import { cookies } from "next/headers";

export default function ConsoleLayout({ admin, user }: LayoutProps<"/console">) {
  return (
    <Suspense fallback={<p>Loading console…</p>}>
      <ByRole admin={admin} user={user} />
    </Suspense>
  );
}

async function ByRole({ admin, user }: { admin: React.ReactNode; user: React.ReactNode }) {
  const role = (await cookies()).get("role")?.value;
  return role === "admin" ? admin : user;
}

export default function ConsolePage() {
  return null;
}

export default function AdminPanel() {
  return <p id="admin">Admin panel: payroll export (SECRET-PAYROLL-2026)</p>;
}

export default function AdminDefault() {
  return null;
}

export default function UserPanel() {
  return <p id="user">Your orders: 3</p>;
}

export default function UserDefault() {
  return null;
}

Route (app)
┌ ○ /_not-found
└ ◐ /console


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

role=user    visible <p>: "Your orders: 3"
             "SECRET-PAYROLL-2026" appears 2 times in the response
             e.g. …{"s":"__PAGE__","h":34,"d":{"r":["$","$1","c",{"children":[["$","p",null,{"id":"admin","children":"Admin panel: payroll export (SECRET-PAYROLL-2026)"}]…
role=admin   visible <p>: "Admin panel: payroll export (SECRET-PAYROLL-2026)"

curl -s -H 'rsc: 1' -b 'role=user' 'http://localhost:4520/console?_rsc'   (the client-navigation payload, from a re-run on port 4520)
             200 text/x-component, "SECRET-PAYROLL-2026" appears 2 times, in the same ["$","p",null,{"id":"admin",…}] element

import Link from "next/link";
import { Photo } from "@/app/_components/photo";

export function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }, { id: "3" }];
}

export default async function PhotoPage({ params }: PageProps<"/photos/[id]">) {
  const { id } = await params;
  return (
    <main id="photo-page">
      <h1>Photo {id} (full page)</h1>
      <Photo id={id} />
      <Link href="/">Back to the gallery</Link>
    </main>
  );
}

import "./globals.css";

export default function RootLayout({ children, modal }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        {children}
        {modal}
      </body>
    </html>
  );
}

export default function NoModal() {
  return null;
}

export default function CloseModal() {
  return null;
}

import Link from "next/link";

export default function GalleryPage() {
  return (
    <main id="gallery">
      <h1>Gallery</h1>
      {["1", "2", "3"].map((id) => (
        <Link key={id} href={`/photos/${id}`} className="thumb">
          Photo {id}
        </Link>
      ))}
    </main>
  );
}

export default function AboutPage() {
  return <h1>About the photographer</h1>;
}

export function Photo({ id }: { id: string }) {
  return <figure className="photo">[ image {id} ]</figure>;
}

"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";

export function Modal({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  return (
    <div role="dialog" aria-modal="true" id="modal">
      {children}
      <button id="close" onClick={() => router.back()}>Close</button>
      <Link href="/about" id="about-link">About the photographer</Link>
    </div>
  );
}

Route (app)
┌ ○ /
├ ○ /_not-found
├   /(.)photos/[id]
│ ├ ◐ /(.)photos/[id]
│ ├ ○ /(.)photos/1
│ ├ ○ /(.)photos/2
│ └ ○ /(.)photos/3
├ ○ /about
└   /photos/[id]
  ├ ◐ /photos/[id]
  ├ ○ /photos/1
  ├ ○ /photos/2
  └ ○ /photos/3


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

load /                    /           history 2  gallery ✓  modal ✗  full page ✗  h1: Gallery
click Photo 2             /photos/2   history 3  gallery ✓  modal ✓  full page ✗  h1: Gallery
   request: GET /photos/2?_rsc=…  next-url: /   (plus prefetches for the modal's /about link)
Close (router.back())     /           history 3  gallery ✓  modal ✗  full page ✗
browser forward           /photos/2   history 3  gallery ✓  modal ✓  full page ✗
reload                    /photos/2   NEW document  gallery ✗  modal ✗  full page ✓  h1: Photo 2 (full page)
browser back              /           gallery ✓  modal ✗
click Photo 3             /photos/3   gallery ✓  modal ✓
modal's Link to /about    /about      gallery ✗  modal ✗  h1: About the photographer

curl -s http://localhost:4502/photos/2   →   <h1>Photo 2 (full page)</h1> <figure class="photo">[ image 2 ]</figure>   (no modal)

click Photo 3             /photos/3   gallery ✓  modal ✓
modal's Link to /about    /about      gallery ✗  modal ✓  h1: About the photographer

import Link from "next/link";
import { Counter } from "./counter";

export default function FeedbackLayout({ children }: LayoutProps<"/feedback">) {
  return (
    <section>
      <nav>
        {["a", "b", "c", "d"].map((t) => (
          <Link key={t} href={`/feedback/${t}`}>Topic {t}</Link>
        ))}
      </nav>
      <Counter label="layout" />
      {children}
    </section>
  );
}

import { Counter } from "../counter";
import { ResetOnPush } from "../reset-on-push";

export function generateStaticParams() {
  return ["a", "b", "c", "d"].map((topic) => ({ topic }));
}

export default async function TopicPage({ params }: PageProps<"/feedback/[topic]">) {
  const { topic } = await params;
  return (
    <article>
      <h1>Topic {topic}</h1>
      <Counter label="page" />
      <ResetOnPush>
        <Counter label="keyed" />
      </ResetOnPush>
    </article>
  );
}

"use client";

import { useState } from "react";

export function Counter({ label }: { label: string }) {
  const [count, setCount] = useState(0);
  return (
    <button className={`count-${label}`} onClick={() => setCount(count + 1)}>
      {label}: {count}
    </button>
  );
}

"use client";

import { useEffect } from "react";
import { usePathname } from "next/navigation";

declare global {
  interface Window {
    mountLog?: string[];
  }
}

export function MountLog({ name }: { name: string }) {
  const pathname = usePathname();
  useEffect(() => {
    (window.mountLog ??= []).push(`${name} effect ran on ${pathname}`);
    return () => {
      window.mountLog?.push(`${name} cleanup on ${pathname}`);
    };
  }, [name, pathname]);
  return null;
}

"use client";

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

export function ResetOnPush({ children }: { children: React.ReactNode }) {
  const { bfcacheId } = useRouter();
  return <Fragment key={bfcacheId}>{children}</Fragment>;
}

Route (app)
┌ ○ /_not-found
└   /feedback/[topic]
  ├ ◐ /feedback/[topic]
  ├ ○ /feedback/a
  ├ ○ /feedback/b
  └ ◐ [+2 more paths]


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

load /feedback/a           0 · 0 · 0 · 0   template effect ran on /feedback/a
click each counter twice   2 · 2 · 2 · 2
Link → b                   2 · 0 · 0 · 0   template cleanup on /feedback/a; template effect ran on /feedback/b
Link → a                   2 · 2 · 2 · 0   template cleanup on /feedback/b; template effect ran on /feedback/a
click keyed twice          2 · 2 · 2 · 2
browser back  → b          2 · 0 · 0 · 0   template cleanup on /feedback/a; template effect ran on /feedback/b
browser forward → a        2 · 2 · 2 · 2   template cleanup on /feedback/b; template effect ran on /feedback/a
Link → c, Link → d, Link → b   (all 2 · 0 · 0 · 0)
Link → a                   2 · 0 · 0 · 0   template cleanup on /feedback/b; template effect ran on /feedback/a

load /feedback/a           0 · 0 · 0 · 0
click each counter twice   2 · 2 · 2 · 2
Link → b                   2 · 0 · 0 · 0
Link → a                   2 · 0 · 0 · 0
click keyed twice          2 · 0 · 0 · 2
browser back  → b          2 · 0 · 0 · 0
browser forward → a        2 · 0 · 0 · 0

import { Suspense } from "react";

async function getProduct(id: string) {
  "use cache";
  return { name: `Product ${id}`, price: 10 + Number(id) };
}

export default function ProductPage({ params }: PageProps<"/products/[id]">) {
  return (
    <main>
      <h1>Product page</h1>
      <Suspense fallback={<p id="product-fallback">Loading product…</p>}>
        <ProductInfo params={params} />
      </Suspense>
    </main>
  );
}

async function ProductInfo({ params }: Pick<PageProps<"/products/[id]">, "params">) {
  const { id } = await params;
  const product = await getProduct(id);
  return (
    <p id="product-info">
      {product.name}: ${product.price}
    </p>
  );
}

import { Suspense } from "react";
import { cookies } from "next/headers";

export default function AccountPage() {
  return (
    <main>
      <h1>Account</h1>
      <Suspense fallback={<p>Loading account…</p>}>
        <Greeting />
      </Suspense>
    </main>
  );
}

async function Greeting() {
  const user = (await cookies()).get("user")?.value ?? "guest";
  return <p id="greeting">Hello, {user}</p>;
}

export default function AboutPage() {
  return <h1>About</h1>;
}

export default function ContactPage() {
  return <h1>Contact</h1>;
}

export default function TermsPage() {
  return <h1>Terms</h1>;
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /about
├ ◐ /account
├ ○ /contact
├   /products/[id]
│ └ ◐ /products/[id]
└ ○ /terms


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content