Next.js 路由 App Router

介绍

Next.js使用基于文件系统的路由。

Next.js uses file-system based routing, meaning you can use folders and files to define routes.

App Router

首页

app目录下的page.tsx即为首页/路径。

自定义路径

路径/admin/login对应的文件夹就是app/admin/login，组件为page.tsx。

动态路由

创建带中括号[]的文件夹，如：[id]。

(folder)

()类型的文件夹是为了开发者方便的区分业务属性，不会映射到URL路径上。

文件层级

└─src
    └─app
        │  error.tsx
        │  favicon.ico
        │  globals.css
        │  layout.tsx
        │  not-found.tsx
        │  page.module.css
        │  page.tsx
        │  robots.txt
        │
        ├─(client)
        │  ├─(dashboard)
        │  │  └─admin
        │  │      └─login
        │  │              page.tsx
        │  │
        │  └─(portal)
        │      └─p
        │          └─[id]
        │                  page.tsx
        │
        └─(server)
            └─(dashboard)

文档

https://nextjs.org/docs/app/getting-started/layouts-and-pages