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。
Next.js 使用文件系统定义路由。app 目录下的文件夹层级直接映射到 URL 路径。
代码结构示例:
app/
├── layout.tsx # 根布局 (localhost:3000/)
├── page.tsx # 首页 (localhost:3000/)
└── dashboard/
├── layout.tsx # Dashboard 专用布局
└── page.tsx # Dashboard 页面 (localhost:3000/dashboard)
当 URL 片段不确定时(如产品 ID、博客 Slug),使用动态路由段。
在 Next.js 15 中,获取这些参数的方式发生了重大变化。
定义方式:文件夹命名为 [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>
);
}