Nextjs 13 app目录如何为主页指定路由文件夹

Question

在带有实验性应用程序目录的 Nextjs 中，我想为整个应用程序指定布局、错误、加载等，然后为主页独有的布局、错误、加载等页。只需创建一个文件夹，然后将这些文件放入其中，即可轻松地对应用程序中的每个其他页面完成此操作。但我似乎无法弄清楚如何为主页指定文件夹。主页的所有内容都位于应用程序目录的根目录中，整个应用程序以及主页都使用该目录。似乎您应该能够指定一个索引目录并将其像应用程序中的任何其他页面一样对待，但事实并非如此。我似乎找不到任何有关如何处理此问题的文档。这只是Next13的一个功能吗？如果是这样，那么您可以为应用程序中的每个页面指定路由特定页面、布局、错误等，但不能为主页指定，这似乎有点奇怪。

那么如何使用应用程序目录文件结构为 Nextjs 13 中的主页指定目录呢？

Answer 1

查看 Nextjs 路由组Nextjs 路由组。您可以为您的家庭特定内容创建一个路由组。路由组是通过创建一个目录并用括号括起来来定义的。因此，您可以创建一个名为 的目录(home)并移入page.js其中，然后您layout.js也可以在该目录中创建另一个目录。像这样：

/app
  layout.js
  /(home)
    page.js
    layout.js
  /about
    page.js
    layout.js
    ...ect

因此 Nextjs 将首先检查应用程序目录的根目录并加载layout.js在那里找到的内容。然后它将作为根目录的子目录访问该(home)目录，以加载您的页面和主页布局。