Next.js 13 App目录下如何为首页指定独立路由文件夹？

在Next.js 13的实验性App Router里，要把首页的page.js、layout.js这类专属文件和根目录的全局文件分开，不用堆在根目录里，最靠谱的方式是用路由分组，步骤很简单：

1. 建个带括号的分组目录 #

在app文件夹下新建一个用括号包起来的目录，比如(home)——括号是关键，Next.js会把这个目录当成路由分组，不会影响最终的URL，里面的page.js依然对应网站根路径/。

2. 把首页文件移进去 #

把原本放在app根目录的首页相关文件（page.js、layout.js、loading.js、error.js这些）全挪到app/(home)里。

3. 根目录留全局文件 #

app根目录保留全局的layout.js、error.js、loading.js，这些会作用于整个应用，包括首页所在的分组路由。

最终目录结构参考 #

app/
├── layout.js          # 全局布局，所有路由都用它
├── error.js           # 全局错误处理
├── loading.js         # 全局加载组件
└── (home)/
    ├── layout.js      # 首页专属布局，只给/路径用
    ├── error.js       # 首页单独的错误处理
    ├── loading.js     # 首页专属加载效果
    └── page.js        # 首页的页面内容，对应/路径

几个要注意的点 #

• 分组目录的名字随便取，只要用括号包着就行，比如(root-page)、(main)都可以。
• 全局布局会作为父布局，首页的专属布局是嵌套在全局布局里的，不会冲突。
• 如果不需要首页单独的布局，只把page.js放进分组目录就行，全局布局照样生效。

这样既实现了首页文件和全局文件分离，又保持首页的URL还是/，完全符合需求。

内容的提问来源于stack exchange，提问作者user3331344