Next Brochure
约 171 字小于 1 分钟
2025-08-24
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