javascript - NextJS 部署到特定的 URL 路径

Question

我正在开发我的第一个 NextJS 应用程序。当我运行“npm run dev”或“npm run start”时，它会将我的应用程序部署到

http://host:port/

当我导航到页面时，网址变为

http://host:port/page1

我需要有自己的具体网址，例如

http://host:port/my-test-application/path-for-my-app/
http://host:port/my-test-application/path-for-my-app/page1

此外，我的应用程序有很多元素可以链接到应用程序的其他区域，我需要这些元素也可以使用 basePath 转到 URL，而不仅仅是转到根路径。

我还将将此应用程序分解到具有不同 basePaths 的不同服务器，因此这不能在我的应用程序中硬编码。

我怎样才能做到这一点？

对于其他应用程序，例如 react/vue/angular/native JS，我只需构建我的应用程序并将构建代码放在我服务器上的“my-test-application/path-for-my-app”文件夹中。

我用我的 NextJS 应用程序尝试了这个，但我收到一个错误，即找不到“.next”文件夹。

我用谷歌搜索，可以找到一些使用“assetPrefix”或“Zones”的引用资料。但是我真的不明白我应该做什么。

如何将我的应用程序部署到特定 URL

解决方案 1:重构“页面” - 不能让我部署到具有不同 basePaths 的不同服务器

我可以在我的“页面”目录中创建文件夹结构并更改我的所有元素以使用此文件夹结构。

|- pages
     |- my-test-application
           |- path-for-my-app
                |- index.js
                |- page1.js


<Link href="/my-test-application/path-for-my-app/page1" >

我不喜欢这个解决方案，因为 basePath 被硬编码到我的应用程序中，与部署设置相对。

如果我想将我的应用程序部署在具有不同 basePaths 的 2 台服务器上(即下面)，我必须有 2 个版本的代码。

http://host:port/my-test-application_1/path-for-my-app/page1
http://host:port/my-test-application_2/diff-path-for-my-app/page1

更新:我在 3 月 5 日更新了这个问题，包括我对 s 工作的需要和一个我不喜欢的解决方案。

Answer 1

在 Next.js 中 ≥ 9.5 ，你可以设置一个 basePath 在您的 next.config.js .例如，如果您希望整个 Next.js 应用程序位于 /docs ， 您可以使用:

// next.config.js
module.exports = {
  basePath: '/docs'
}

Next 将确保所有 Assets 都从正确的位置提供，它会自动为所有 Link 添加此基本路径的前缀。 s 在您的应用程序中，以及在使用 next/router 的程序化导航期间.例如，

<Link href="/about">
  <a>About Page</a>
</Link>

将转换为链接到 /docs/about , 也会

router.push('/about')

这意味着您可以更改 basePath无需更改应用程序的实际代码中的任何内容。