Next.js带动态参数的拦截路由在Vercel生产环境无法正常工作

问题详情 #

本地开发与生产构建模式下，拦截路由功能均正常，但部署到Vercel后访问对应路由返回500错误，日志报错信息如下：

Error: Invalid interception route: /collections//(.). Must be in the format //(..|...|..)(..)/.

怀疑Next.js未将动态参数替换为实际值，但Vercel请求信息中的路径名显示正确。

当前配置文件 #

next.config.js 内容：

/** @type {import('next').NextConfig} */
const nextConfig = {
  trailingSlash: true,
};

export default nextConfig;

已尝试的操作 #

• 将路径中的 (.) 修改为 (..)，结果返回404错误；
• 硬编码有效链接，仍出现相同的500错误。

可行解决方向 #

• 规范路由文件结构：确保拦截路由的文件路径符合Next.js要求，动态参数文件夹需用 [param] 格式命名（如 /collections/[id]/(.)），避免出现空路径段（即双斜杠）；
• 关闭尾随斜杠测试：暂时将 next.config.js 中的 trailingSlash 设为 false，重新部署到Vercel验证是否解决冲突；
• 清除Vercel构建缓存：在Vercel项目部署设置中找到「Clear Build Cache」选项，清除缓存后重新构建部署；
• 核对Next.js版本：确保使用的Next.js版本支持拦截路由且无已知bug，建议升级至最新稳定版或回退到兼容版本（如v13.4+）；
• 检查跳转参数有效性：通过 next/link 或 router.push 跳转时，确保传递的动态参数不为空，避免生成 /collections//(.) 这类无效路径。

内容的提问来源于stack exchange，提问作者yurii