Netlify 上 Next.js 的尾随斜杠不起作用

Question

我们在 Netlify 上有一个 Next.js 站点，其中包含静态页面和服务器渲染页面。我们有https://example.com/locations/berlin 之类的链接，我们希望它们始终以https://example.com/locations/berlin/ 之类的斜杠结尾。为此，我们使用 Next.js 的 trailingSlash: true 选项，该选项在本地运行良好。

当我们将站点部署到 Netlify 时会出现问题。页面总是被重定向到不带斜杠的 url，例如状态码为 301 的https://example.com/locations/berlin。我们已经在 Netlify 构建设置中启用了Pretty URLs，但这并没有什么区别。

当我理解正确时，使用trailingSlash: true，Next.js 应该创建这样的静态页面：

https://example.com/locations/berlin/index.html

但它会创建这样的页面：

https://example.com/locations/berlin.html

// next.config.js
module.exports = {
    target: "serverless",
    trailingSlash: true,
};

对于我们的静态页面，我们使用pages/[...slug].js 文件，该文件使用fallback: false 导出我们的静态路径。

由于我们也使用服务器渲染页面，所以我们不能使用next export。

# netlify.toml

[build]
    command = "yarn build"

[[plugins]]
    package = "@netlify/plugin-nextjs"

// package.json

{
  ...
  "scripts": {
    "build": "next build",
    ...
  }
}

版本

• 下一个：10.2.0
• @netlify/plugin-nextjs: 3.2.0

预期行为

• 不带斜杠的页面将使用状态码 301 重定向到带有斜杠的 url
• 带有斜杠的页面直接加载状态码 200

Answer 1

目前似乎没有一种简单的方法可以在 Neltify 上使用 Next.js 使用尾随斜杠，因此我们决定切换到 Vercel。总体而言，该平台似乎更适合 Next.js，这并不奇怪，因为它是由同一家公司开发的。