nextjs 中的 2 级嵌套路由

Question

我仔细阅读了下一个路由系统的文档。它只提到我可以像这样实现动态路由：

http://localhost:3000/level1/dynamicSlug

但我正在努力实现这样的目标：

http://localhost:3000/level1/level2/dynamicSlug

我也想动态创建 level2

非常感谢 ！

Answer 1

可以通过这种方式根据您的要求进行嵌套场景。例如：

pages/
  level1/
    [dynamicSlug]/
      - index.js           // will match for /level1/1234
    level2/
      - index.js           // will match for /level1/level2
      - [dynamicSlug].js   // will match for /level1/level2/1234

或者

pages/
  level1/
    [dynamicSlug]/
      - index.js           // will match for /level1/1234
    level2/
      - index.js           // will match for /level1/level2
      [dynamicSlug]/
        - index.js         // will match for /level1/level2/1234

Answer 2

我知道这是一篇有点旧的帖子，但我只想分享我对 NextJS v11 的工作回应。

我想要两个级别的动态路由。例如：

• {siteroot}/dynamicPage
• {siteroot}/dynamicUrlSection/dynamicPage

我的文件夹结构是：

• /pages/[section]/[page].tsx
• /pages/[section]/index.tsx

这样，根目录的“dynamicPage”路径由 处理index.tsx，嵌套路由由 处理[page].tsx

Contentful额外信息：我正在作为 CMS工作。我对两个级别的所有页面使用单一内容模型。该模型具有“部分”和“页面”属性。为根动态页面（即 ）提供服务的条目/pages/[section]/index在 的“page”属性中具有复合值{section}-index。然后我必须在我的客户端代码中变得聪明一些：

if (!page) {
  page = `${section}-index`;
}

await fetchData(section, page);

Answer 3

你有2个选择：

1. Dynamic Routing通过调用文件夹 as[dynSlag]并将页面文件放入其中来使用 v9 。
2. 使用custom server and routing，您将需要定义一个自定义服务器，将您的路径映射到特定的下一页。