Next.js 是一个用于构建 Web 应用程序的 React 框架。

路由约定

• 所有路由都必须位于 app 文件夹中

• 路由文件必须命名为 page.js 或 page.tsx

• 每个文件夹代表 URL 路径的一个段

---

方括号中的文件夹名视为动态路由

export default async function ProductDetails({
  params,
}: {
  params: Promise<{ productId: string }>;
}) {
  const productId = (await params).productId;
  return <h1>Details about product {productId}</h1>;
}

嵌套动态路由

export default async function ProductReview({
  params,
}: {
  params: Promise<{ productId: string; reviewId: string }>;
}) {
  const { productId, reviewId } = await params;
  return (
    <h1>
      Review {reviewId} for product {productId}
    </h1>
  );
}

对应的地址是 localhost:3000/products/1/reviews/1，文件夹结构也是这样

app/
├── products/
│   ├── [productId]/
│   │   ├── reviews/
│   │   │   ├── [reviewId]/
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   └── page.tsx
│   └── page.tsx
├── layout.tsx
└── page.tsx