App Router

Next.js 13 引入了全新的 App Router，基于 React Server Components 构建，提供了更强大的路由和布局能力。

路由约定

在 app/ 目录下，文件夹结构即路由结构：

app/
├── page.tsx            → /
├── about/
│   └── page.tsx        → /about
├── blog/
│   ├── page.tsx        → /blog
│   └── [slug]/
│       └── page.tsx    → /blog/:slug

每个路由段可包含以下特殊文件：

page.tsx — 页面 UI
layout.tsx — 共享布局
loading.tsx — 加载状态
error.tsx — 错误处理
not-found.tsx — 404 页面

Layout（布局）

布局是在多个页面之间共享的 UI：

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh">
      <body>
        <nav>导航栏</nav>
        {children}
        <footer>页脚</footer>
      </body>
    </html>
  )
}

动态路由

使用方括号 [param] 创建动态段：

// app/blog/[slug]/page.tsx
export default function BlogPost({
  params,
}: {
  params: { slug: string }
}) {
  return <h1>文章：{params.slug}</h1>
}

路由组

用圆括号 (group) 组织路由，不影响 URL：

app/
├── (marketing)/
│   ├── about/page.tsx      → /about
│   └── contact/page.tsx    → /contact
├── (dashboard)/
│   ├── settings/page.tsx   → /settings
│   └── profile/page.tsx    → /profile

App Router

Next.js 13 的 App Router 以 React Server Components 為基礎，強化路由與版面。

路由約定

app/ 下資料夾即 URL；常見特殊檔：page.tsx（頁面）、layout.tsx（版面）、loading.tsx、error.tsx、not-found.tsx。

app/page.tsx → /；app/about/page.tsx → /about；app/blog/[slug]/page.tsx → /blog/:slug

Layout（版面）

版面包覆子路由，以 children 插入內容：

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-Hant">
      <body>
        <nav>導覽列</nav>
        {children}
        <footer>頁尾</footer>
      </body>
    </html>
  )
}

動態路由

方括號 [param] 為動態區段：

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>文章：{params.slug}</h1>
}

路由組

圓括號 (group) 僅用於整理目錄，不會出現在網址：

app/(marketing)/about/page.tsx    → /about
app/(dashboard)/settings/page.tsx → /settings

同一層可有多組 (group)，便於依功能拆分版面與載入邏輯。

App Router

The App Router (app/) is the modern way to structure routes in Next.js. Folders and special files define URLs, layouts, and loading behavior without a central route table.

Routing conventions

page.tsx — UI for a segment; makes the route public.
layout.tsx — Shared shell for that segment and its children.
loading.tsx — Suspense boundary for loading UI.
error.tsx — Error boundary for the segment.
not-found.tsx — Custom 404 for the subtree.

A file at app/dashboard/page.tsx renders /dashboard; only folders with a page.tsx (or a route handler) are navigable routes.

Layouts

Layouts wrap nested routes and preserve state on client-side navigation:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <section className="dashboard">
      <nav>{/* sidebar */}</nav>
      <div>{children}</div>
    </section>
  );
}

Root app/layout.tsx should include <html> and <body> and is required for the tree.

Dynamic routes

Use bracket folders for dynamic segments:

app/blog/[slug]/page.tsx   → /blog/hello-world
app/shop/[...slug]/page.tsx → catch-all segments

// Next.js 15+: params is a Promise
export default async function Post({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <article>{slug}</article>;
}

Route groups

Parentheses do not affect the URL: (marketing) and (shop) organize code while keeping flat URLs.

app/
├── (marketing)/
│   └── page.tsx      → /
└── (shop)/
    └── cart/page.tsx → /cart

Use groups to split layouts or concerns without extra path segments.

Previous ChapterInstallation

Next ChapterLayouts and Pages