NextJs+Vercel路由404：将Netlify.toml转为有效vercel.json

你的问题出在之前的vercel.json配置上——它把所有请求（包括CSS、JS这类静态资源）都强制重写到index.html，导致静态资源无法加载，客户端路由也没法正常工作。

对应你Netlify的配置，正确的vercel.json应该只在请求路径没有对应的文件/目录时，才将请求导向index.html，这样既保留静态资源的正常访问，又支持SPA路由：

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html",
      "missing": [
        { "type": "file", "path": "/$1" },
        { "type": "file", "path": "/$1.html" },
        { "type": "directory", "path": "/$1" }
      ]
    }
  ]
}

另外还有更简单的方案：如果你的Next.js项目是静态导出模式（next.config.js里配置了output: 'export'），可以直接在next.config.js里开启trailingSlash: true，不需要额外的vercel.json配置：

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

module.exports = nextConfig;

这个配置会让Next.js在导出时，为每个路由生成/about/index.html这样的目录结构，Vercel访问/about时会自动加载对应的index.html，从根源上避免404问题。

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