NextJS 13.3部署Vercel后动态路由出现404页面问题求助

• 核对动态路由文件结构
  确认app/blog/[post]目录下存在page.js或page.tsx文件——App Router要求每个路由段必须以这个文件作为页面入口，本地开发模式容错性较高，但生产构建会严格校验文件结构，缺失的话直接导致404。

• 检查静态生成参数配置
  如果你的博客文章是静态生成的，必须在page.js里正确实现generateStaticParams函数，返回所有实际存在的文章slug：

  // app/blog/[post]/page.js
  export async function generateStaticParams() {
    // 替换为你获取文章列表的逻辑，比如从数据库/本地MD文件读取
    const posts = await getBlogPosts();
    return posts.map(post => ({ post: post.slug }));
  }
  

  没配置这个函数的话，Vercel会尝试增量静态生成，但首次访问时可能因未触发生成逻辑返回404。可以去Vercel控制台的「Functions」面板查看SSR函数是否有报错。

• 验证Vercel部署配置
  确保项目的构建命令是next build，输出目录为.next——这是Next.js的默认配置，如果手动修改过，可能导致路由生成异常。另外查看部署日志，找有没有关于动态路由的警告或错误信息。

• 清除缓存重新部署
  Vercel的缓存可能残留旧路由配置，重新部署时勾选「Redeploy with cache cleared」，强制重新执行完整构建流程。

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