具有下一个导出模式的动态路由

Question

我们在 next export mode（静态 HTML 导出）中使用 Next.Js，我们需要高级动态路由。

我们的路线看起来像 /[config1]/[config2]/[optionalConfig?]/page，其中一段是可选的，页面名称是固定的。例如 a/b/c/page1 或 a1/b1/page2。页面需要配置段数据来呈现。

我还没有找到使用 built-in routing 执行此操作的任何方法。我可以 /pages/[config1]/[config2]/page1.tsx，但那个可选部分似乎是个问题。请注意，自定义服务器似乎不是一个选项，因为由于其他限制，我们必须使用下一个导出模式。

注意：我们不知道构建时的路径；它们代表了我们运行时配置的一部分。必须使用客户端路由。（我们确实知道有限的页面集——比如说 page1 ... page10——但是到这些页面的路径会有所不同。）

我尝试切换到 React Router，设置 useFileSystemPublicRoutes: false 并将路由添加到 pages/_app.tsx（自定义应用程序）。几乎有效，但我在控制台中看到 on-demand-entries-utils.js 的许多 404 以及一些“检测到可能的 EventEmitter 内存泄漏”警告（在开发模式下）。

有效解决方案（必须 100% 客户端工作）：

使用内置路由的方法
将 React Router 与 Next.Js
替代库（我看过 next-routes 但已经 3 年没有更新了）

更新

我们或许可以取消可选航段的要求。但是，看来我们必须实施 getStaticPaths 并指定所有路由。例如：

页数/[配置]/foo.tsx

export async function getStaticPaths() {
  // Runs at build time
  return {
    paths: [{ params: { config: 'xyz' } }],
    fallback: false,
  };
}

export async function getStaticProps(context) {
  return {
    props: {},
  };
}

export default function FooPage(): JSX.Element {
  return <div>FOO</div>;
}

这将生成

┌ ○ /
├   /_app
├ ● /[config]/foo
├   └ /xyz/foo

问题是我们不知道构建时的配置。

我们需要动态客户端路由。我们希望继续使用 Next.js，因为最终我们也许可以使用 SSR，但目前这不是一个选项。

Answer 1

您可以创建一个包罗万象的路由来获取参数，包括可选参数，然后您需要根据它渲染正确的组件。因此，如果您创建了：

pages/[...config].tsx

这等同于：

pages/[...config]/index.tsx

然后在index.tsx中，可以在url的基础上得到getStaticProps中的字符串数组配置。所以 /config1/config2/optional 是 [config1, config2, optional] 而 /config1/config2 是 [config1, config2].

因此，如果您需要在已知和可选路径下添加其他子页面，您可以将其用作各种目录路径。

具有下一个导出模式的动态路由

Dynamic routing with next export mode

url-routing

react-router

next.js

static-site-generation