Next.js使用一个名为pages的特殊目录。这个目录用于自动路由。每一个在pages目录下的.js、.jsx、.ts或.tsx文件都会自动成为一个可访问的路由。以下是一个示例：
pages/
├── index.js
├── about.js
├── dashboard.js
├── blog/
│ ├── index.js
│ ├── [slug].js
│ └── [id]/
│ └── index.js
└── user/
├── index.js
└── [id].js
index.js: 这是你的主页，可以通过/来访问。about.js: 这是关于页面，可以通过/about来访问。dashboard.js: 这是仪表盘页面，可以通过/dashboard来访问。blog/index.js: 这是博客列表页面，可以通过/blog来访问。blog/[slug].js: 这是博客文章页面，可以通过/blog/:slug来访问，其中:slug是文章的唯一标识符。blog/[id]/index.js: 这是博客文章详情页面，可以通过/blog/:id来访问，其中:id是文章的唯一ID。user/index.js: 这是用户列表页面，可以通过/user来访问。user/[id].js: 这是用户详情页面，可以通过/user/:id来访问，其中:id是用户的唯一ID。
在[]中的部分是动态路由参数。例如，[slug].js会匹配/blog/hello-world，其中hello-world是动态部分，可以在页面组件中通过router.query.slug来获取。
这种文件系统路由的方式使得路由的创建变得非常直观和简单，你只需要添加或删除文件，就可以轻松地创建或删除路由。
关于[...sulg].js用法
[...slug].js是Next.js中的一种特殊路由，被称为“捕获所有路由”。这种路由可以匹配一个或多个动态段，而不仅仅是一个。
例如，假设你的pages目录如下：
pages/
├── index.js
└── post/
└── [...slug].js
在这种情况下，[...slug].js可以匹配以下路径：
/post/a/post/a/b/post/a/b/c/post/a/b/c/d- 等等
在每种情况下，slug参数都是一个数组，包含了所有的动态段。例如，对于路径/post/a/b/c，slug参数将是['a', 'b', 'c']。
你可以在你的页面组件中通过router.query.slug来获取这个数组。例如：
import { useRouter } from 'next/router'
export default function Post() {
const router = useRouter()
console.log(router.query.slug) // 输出: ['a', 'b', 'c'] 对于路径 /post/a/b/c
// ...
}
这种类型的路由在你需要处理嵌套路径（例如分类或多级导航）时非常有用。