时间戳

首页 > 解决方案 > Netlify 上 Next.js 的尾随斜杠不起作用

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

问题描述

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

当我们将站点部署到 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",
    ...
  }
}

版本

预期行为

标签： redirectnext.jsnetlify

解决方案

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

推荐阅读