NextJS 13生产环境动态路由失效问题求助

一、部署到Vercel后返回404的问题 #

核心原因 #

Next.js 13 App Router默认采用静态渲染，若未预生成动态路由的所有可能路径，部署后访问未预生成的路径会返回404。此外，数据类型不匹配也可能导致找不到对应内容，进而触发框架默认404。

解决步骤 #

1. 添加静态路径预生成函数
   在src/app/blogs/[blog]/page.tsx中添加generateStaticParams，让Vercel构建时生成所有动态路由页面：

// 导入你的blogsData数据
import blogsData from '../path/to/blogsData';

export async function generateStaticParams() {
  return blogsData.map((blog) => ({
    blog: blog.id.toString(), // 确保id转为字符串，和params.blog类型一致
  }));
}

// 原有的Blog组件代码调整后
export default function Blog({ params }: Props) {
  const blog_id = params.blog;
  // 统一类型后匹配数据
  const blog = blogsData.find((blog) => blog.id.toString() === blog_id);

  if (!blog) {
    return (<div>Blog Not Found</div>)
  }

  return (
    <div className="">
      // 页面内容
    </div>
  )
}

2. 校验数据类型匹配
   确保blog.id和params.blog的类型一致：

• 若blog.id是数字，将其转为字符串后再与params.blog比较；
• 若blog.id是字符串，直接使用===比较即可。

二、跳转路径被截断为/blogs/cyp的问题 #

排查与解决 #

1. 检查跳转链接代码
   确认使用next/link的地方，href属性值为完整的/blogs/cypress，无拼写错误或截断逻辑：

import Link from 'next/link';

// 正确写法
<Link href="/blogs/cypress">Cypress博客</Link>

2. 检查路由中间件
   若项目中有middleware.ts文件，排查是否存在错误的正则匹配或重定向规则，导致路径被错误截断。

3. 检查Vercel路由配置
   查看项目根目录下的vercel.json，确认无自定义路由规则导致路径重定向异常。

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