Next.js 如何配置 trailingSlash？

推荐答案

在 Next.js 中，可以通过在 next.config.js 文件中配置 trailingSlash 选项来控制 URL 是否以斜杠结尾。默认情况下，trailingSlash 为 false，即 URL 不以斜杠结尾。如果需要 URL 以斜杠结尾，可以将 trailingSlash 设置为 true。

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

本题详细解读

1. trailingSlash 的作用

trailingSlash 是 Next.js 提供的一个配置选项，用于控制生成的 URL 是否以斜杠结尾。这个选项会影响路由的生成和匹配。

• 当 trailingSlash 为 false 时（默认值），URL 不会以斜杠结尾。例如，访问 /about 会被视为 /about。
• 当 trailingSlash 为 true 时，URL 会以斜杠结尾。例如，访问 /about 会被重定向到 /about/。

2. 配置方法

在 next.config.js 文件中，可以通过设置 trailingSlash 选项来启用或禁用 URL 末尾的斜杠。

// next.config.js
module.exports = {
  trailingSlash: true, // 启用 URL 末尾的斜杠
};

3. 注意事项

• SEO 影响：URL 是否以斜杠结尾可能会影响 SEO。搜索引擎可能会将 /about 和 /about/ 视为不同的 URL，因此需要确保网站的一致性。
• 路由匹配：启用 trailingSlash 后，Next.js 会自动处理路由匹配。例如，访问 /about 会被重定向到 /about/。
• 静态文件：如果启用了 trailingSlash，静态文件的路径也需要保持一致。例如，/images/logo.png 应该改为 /images/logo.png/。

4. 示例

假设你有一个页面 pages/about.js，启用 trailingSlash 后，访问 /about 会被重定向到 /about/。

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

访问 /about 时，Next.js 会自动重定向到 /about/，并加载 pages/about.js 页面。