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