Nextjs14记录

创建 nextapp

pnpx create-next-app  xxxx

路由

文件式生成路由

自动识别在src/app目录下
创建的page.tsx 文件

动态路由

src/
└── app/└── product/└── [productId]/└── page.tsx其中page中的函数 {params}  为固定识别的参数可以获取路由传过来的值

嵌套动态路由

src/
└── app/└── product/└── [productId]/└── reviews/└── [reviewsId]/└── page.tsx└── page.tsx
多层嵌套 可以获取所有层级动态路由的值

捕获所有路由（Catch-All 路由）

src/
└── app/└── products/└── [...slug].js

访问 /products/a、/products/a/b、/products/a/b/c 等路径都会匹配到 [...slug]，并且这些路径的具体参数可以通过 slug 变量在组件中获取：

私有路由

src/
└── app/└── _lib/└── page.tsx

不会将在以_或%5(_转义字符)起始的文件夹的文件识别为路由

页面不可见

404 页面

在根目录创建
not-found.tsx

单独为某页面设置 404

与文件夹page.tsx同级创建not-found.tsx
pages/
└── product/└── [productId]/└── reviews/└── [reviewsId]/└── page.tsx└── not-found.tsx└── page.tsx