Nextjs -许多页的第一级动态路由，每个页都有子级
我有一个NextJS 12.2/React 18应用程序链接到CMS，用户可以在那里设置他们的自定义页面结构，内容和主题。

• 在前端，将有一些API调用来获取应用程序设置和配置，包括页面层次结构。
• 默认的六个顶级页面名称是主页、内容、事件、用户、搜索和博客。
• 我们可以把这六个页面看作是类型，所以我们有六种不同的类型，用户可以更改这些类型的名称，但不能更改类型本身。正如你所预料的，更改名称将相应地更改URL段。
• 这六种类型中的四种可以有多层（嵌套）子页面。以下是默认应用URL的一些示例：

mydomain.com/homepage 
     mydomain.com/content/
     mydomain.com/events/by-location/[locationID]
     mydomain.com/events/[eventID]
     mydomain.com/events/by-category/[catLevelOne]
     mydomain.com/user/profile 
     mydomain.com/blog/[postID]
     mydomain.com/search?term=searchterm
     mydomain.com/contact-us

• 注意：还有一个静态页面“contact-us”未连接到CMS。
• 要在NextJS路由方法中实现此模型，应用文件结构应如下所示（如果允许的话）：

pages
    ├── [blog]
    │   ├── [postID].js
    │   └── index.js
    ├── [content]
    │   ├── [levelOne]
    │   │   ├── [levelTwo]
    │   │   │   ├── [levelThree]
    │   │   │   │   └── index.js
    │   │   │   └── index.js
    │   │   └── index.js
    │   └── index.js
    ├── [events]
    │   ├── by-category
    │   │   ├── [catLevelOne]
    │   │   │   ├── [catLevelTwo]
    │   │   │   │   └── index.js
    │   │   │   └── index.js
    │   │   └── index.js
    │   ├── by-location
    │   │   ├── [location]
    │   │   │   ├── [locationID].js
    │   │   │   └── index.js
    │   │   └── index.js
    │   ├── index.js
    │   └── [eventID].js
    ├── [user]
    │   ├── account.js
    │   ├── emailverification.js
    │   ├── password.js
    │   └── register.js
    ├── search.js
    └── homepage.js

• 这是不可能的，因为我们不能有两个文件夹与括号在同一水平！
• 如果我硬编码顶层页面的文件名，它们工作得很好，然而，当用户将其默认名称（主页，内容，事件等）更改为其他名称时，问题就开始了，NextJS然后将不知道页面的结构是什么，所以它通过404没有立即找到，因为从API获取文件结构需要几秒钟的时间。
  我尝试过的方法：

1.中间件：结果是我们无法在middleware.js中获取数据，如果我们这样做，每次路由更改时都会有数十次API调用。
1.我尝试了一个动态路由方法，所以我在服务器端的一个[wildcard].js文件中获取数据，然后根据返回的数据重写URL，以便根据页面类型（基本上是硬编码的页面名称）将请求路由到正确的方向。这样做很顺利，但只针对顶部页面，而不是其子页面。