使用Next.js动态路由[[...slug]].js处理所有请求，部署到Vercel后首页链接返回404的原因排查

这是因为Next.js在客户端导航和服务器端路由处理的逻辑差异导致的：

• 本地开发时，Next.js的dev服务器会直接把所有路由（包括/）匹配到你的[[...slug]].js catch-all路由，不管有没有index.js，都会触发getServerSideProps完成SSR渲染。
• 但部署到Vercel生产环境后，当你用<Link href="/">做客户端跳转时，Next.js会默认尝试请求首页的静态数据文件（/_next/data/<build-id>/index.json）——因为它找不到index.js文件，就会认为这个页面可能是静态生成的。但你的应用是纯SSR模式，根本没有生成这个静态数据文件，所以服务器返回404，导致错误页面。

而直接访问/时一切正常，是因为此时请求会走服务器端路由，直接命中[[...slug]].js的getServerSideProps完成渲染。

最简单的修复方式是创建一个空的index.js文件，复用[[...slug]].js的逻辑，让客户端导航到/时能正确匹配到SSR页面：

// pages/index.js
// 导入catch-all路由的页面组件和getServerSideProps
import CatchAllPage from './[[...slug]]';
export default CatchAllPage;

// 复用getServerSideProps逻辑
export const getServerSideProps = require('./[[...slug]]').getServerSideProps;

这样做的好处是：

• 不用重复编写业务逻辑，直接复用已有代码
• 客户端导航到/时，Next.js会找到index.js对应的页面，不会再尝试请求不存在的静态数据文件
• 服务器端路由依然可以正常处理所有请求，包括/

如果你不想创建额外的文件，也可以尝试在next.config.js中配置trailingSlash: true，但这种方式可能会影响其他路由的行为，不如添加index.js来得稳妥。

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