App Router 是 Next.js 基于文件系统的路由机制,

它利用 React Server Components (RSC) 的能力,将路由逻辑与 UI 渲染紧密结合。

版本关键变更 (Next.js 15+)

为了优化渲染性能并为 PPR (局部预渲染) 做准备,

Next.js 15 将依赖于请求时间 (Request Time) 的 API 全面异步化。

这意味着 params、searchParams、cookies() 和 headers() 现在均返回 Promise

访问它们时必须使用 await。

1. 基础路由 (Basic Routing)

Next.js 使用文件系统定义路由。app 目录下的文件夹层级直接映射到 URL 路径。

代码结构示例

app/
├── layout.tsx      # 根布局 (localhost:3000/)
├── page.tsx        # 首页 (localhost:3000/)
└── dashboard/      
    ├── layout.tsx  # Dashboard 专用布局
    └── page.tsx    # Dashboard 页面 (localhost:3000/dashboard)

2. 动态路由与参数读取 (Dynamic Routing & Parameters)

当 URL 片段不确定时(如产品 ID、博客 Slug),使用动态路由段。

在 Next.js 15 中,获取这些参数的方式发生了重大变化。

Async Params (路径参数)

定义方式:文件夹命名为 [slug] 或 [id]。

在页面组件中,params prop 现在的类型是 Promise<T>。

// app/blog/[slug]/page.tsx

// 定义 Params 的类型
type Params = Promise<{ slug: string }>;

export default async function BlogPost({ params }: { params: Params }) {
  // 1. 必须使用 await 解包参数
  const { slug } = await params;

  return (
    <article>
      <h1>文章 Slug: {slug}</h1>
    </article>
  );
}

Async SearchParams (查询参数)