Next.js App Router 路由模式必会：从基础到高级文件夹命名约定全解析

Next.js 的 App Router 采用的是基于文件系统的路由模式。简单来说，你的文件夹结构直接决定了你的网站 URL 结构。通过不同的括号组合，你可以实现从基础页面到极其复杂的动态逻辑。

以下是各类文件夹命名约定的详细说明：

1. 基础文件夹（无括号）

这是最常见的形式。文件夹名直接映射到 URL 路径中。

• 规则：每一个包含 page.js（或 .tsx）的文件夹都会成为一个公共路由。
• 示例：
  • app/about/page.js ➡️ /about
  • app/contact/page.js ➡️ /contact

2. 动态路由（中括号 []）

当你不知道确切的路径名（如文章 ID、用户名）时，使用中括号。

• 用法：[slug] 或 [id]。
• 功能：充当占位符，捕获 URL 中的对应部分作为参数传递给组件。
• 示例：
  • 结构：app/blog/[id]/page.js
  • 匹配：/blog/123 或 /blog/hello-world
  • 参数访问：在页面中通过 params.id 访问该值。

扩展：全捕获路由 ([...folder])

• 用法：在括号内加三个点，如 [...slug]。
• 功能：匹配该路径下的所有后续层级。
• 示例：app/shop/[...docs]/page.js 会匹配 /shop/clothes、/shop/clothes/tops/t-shirts 等。

3. 路由分组（小括号 ()）

有时候你希望整理文件夹结构，但不希望文件夹名字出现在 URL 中。

• 用法：(folderName)。

• 功能：跳过该层级，不影响 URL。常用于为不同部分应用不同的 layout.js（布局）。

• 示例：

  • 结构：app/(marketing)/about/page.js
  • URL：/about （(marketing) 被跳过了，不出现在 URL 中）

• 核心用途：在大型项目中非常有用。你可以将“登录/注册”放在 (auth) 组里使用一套简洁布局，而“仪表盘”放在 (dashboard) 组里使用另一套复杂布局。

4. 私有文件夹（下划线 _）

如果你想在 app 目录下放一些工具函数、组件或测试文件，但不希望它们被意外变成路由。

• 用法：_folderName。
• 功能：将文件夹及其所有子文件夹排除在路由系统之外，明确该文件夹内不包含路由。
• 示例：app/_utils/format.js 不会生成任何路由，即使它位于 app 目录下。

总结对比表

进阶建议：平行路由与拦截路由

除了上述基础约定，Next.js 还支持 @folder (平行路由) 或者 (.)folder (拦截路由)，它们通常用于构建极其复杂的交互，例如在一个页面中并行显示多个区域，或是实现像 Instagram 那样点击图片弹出模态框（不离开当前页面，但 URL 改变）的效果。

通过合理运用这些文件命名约定，你的 Next.js 项目结构将更加清晰，维护和开发体验也将得到显著提升。