title: 路由系统

路由系统

Next.js 16 使用基于文件系统的 App Router，让路由配置变得简单直观。

App Router 基础

在 app 目录下，每个文件夹代表一个路由段：

app/
├── page.tsx              # 对应 /
├── about/
│   └── page.tsx         # 对应 /about
└── blog/
    ├── page.tsx         # 对应 /blog
    └── [slug]/
        └── page.tsx     # 对应 /blog/:slug

页面组件

每个路由的 page.tsx 是该路由的主要内容：

// app/about/page.tsx
export default function AboutPage() {
  return (
    <div>
      <h1>关于我们</h1>
      <p>这是关于页面</p>
    </div>
  )
}

动态路由

使用方括号创建动态路由：

// app/blog/[slug]/page.tsx
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  
  return (
    <article>
      <h1>文章: {slug}</h1>
    </article>
  )
}

路由组

使用圆括号创建路由组，组织文件但不影响 URL：

app/
├── (marketing)/
│   ├── about/
│   └── contact/
└── (shop)/
    ├── products/
    └── cart/

导航

使用 Link 组件进行客户端导航：

import Link from 'next/link'

export default function Navigation() {
  return (
    <nav>
      <Link href="/">首页</Link>
      <Link href="/about">关于</Link>
      <Link href="/blog">博客</Link>
    </nav>
  )
}

小结

App Router 提供了强大而灵活的路由系统，让你能够轻松构建复杂的应用结构。