如何将基本路径附加到 Next.js 处理的所有路由？

【问题标题】：How to append a base path to all routes handled by Next.js?如何将基本路径附加到 Next.js 处理的所有路由？
【发布时间】：2020-04-20 19:46:50
【问题描述】：

我正在将一个现有的 expressjs 应用程序重构为 nextjs 应用程序，该应用程序使用玉作为 UI。我对外部应用程序也使用与 api 服务器相同的应用程序。我在“/ui”下有所有网络应用程序路由，我需要在 NextJS 下移动。

在 NextJS 应用程序中，所有<Link /> 和Router.push() 都需要添加/ui 如/ui/home、/ui/profile 并在pages 下创建ui 文件夹文件夹。有没有办法自动将 nextjs 处理的路由重定向到/ui/<route here>，这样我就不会在每条路由之前明确使用“ui”并创建 ui 文件夹？

【问题讨论】：

标签： reactjs express next.js

【解决方案1】：

您可以为 Next.js 中的所有路由设置basePath。但是，此功能是实验性的。不建议在生产中使用。

next.config.js

module.exports = {
  experimental: {
    basePath: '/ui',
  },
}

所以你的目录结构是：

|--pages
|  |--foo
|  |--bar

链接使用情况：

// will generate /ui/foo
<Link href="foo">
  <a>Foo</a>
</Link>

// will generate /ui/bar
<Link href="bar">
  <a>Bar</a>
</Link>

如果您决定使用它，您可以锁定 package.json 中的 Next.js 版本，因为更新中可能会出现重大更改。

【讨论】：