Next.js 12.2.0中Link标签动态路由有时丢失末尾斜杠求助

问题根源 #

Next.js的Link组件默认会对路径做规范化处理，自动移除末尾斜杠——这是框架为了避免路由重复（比如/blog/post/和/blog/post会被识别为同一个路由）而设计的内置行为。

你遇到“部分保留、部分丢失”的情况，大概率是以下原因：

• 项目混合了静态生成页面与动态路由：静态生成的页面如果是/blog/post/index.html结构，框架可能会保留斜杠；而动态路由（如/blog/[slug]）默认会移除斜杠，因为对应文件是[slug].js而非文件夹下的index.html。
• next.config.js中的trailingSlash配置不统一：如果之前修改过该配置但未全局生效，或者部分页面的生成逻辑绕过了全局配置，也会导致路径不一致。

解决办法 #

1. 全局强制保留末尾斜杠

在next.config.js中添加trailingSlash: true配置，这会让所有路由统一保留末尾斜杠，静态生成的页面会自动生成index.html放在对应文件夹下：

module.exports = {
  trailingSlash: true,
}

配置后需要重新构建项目，确保所有页面的路径规范化统一。

2. 单个Link强制保留斜杠

如果不想全局修改，可以通过as属性指定显示的路径，结合passHref让a标签继承正确的href：

<Link href={`/blog/[slug]`} as={`/blog/${post.slug}/`} passHref>
  <a>{post.title}</a>
</Link>

这种方式适用于需要单独控制某几个路由的场景。

3. 检查自定义路由规则

如果项目中使用了路由中间件（middleware.js）或者next.config.js中的rewrites/redirects规则，确认这些规则没有自动移除末尾斜杠的逻辑。

关于固定路径被移除的说明 #

不管是动态拼接的路径还是写死的固定路径，Link组件都会触发内置的路径规范化逻辑，所以即使你直接写href="/blog/xxx/"，默认也会被移除斜杠，必须通过上述配置来覆盖默认行为。

内容的提问来源于stack exchange，提问作者Md Salim Rana