Next 14 App Router动态路由页面Vercel部署后失效，本地正常

问题描述 #

使用Next 14 App Router开发的项目，静态路由页面在Vercel部署后均可正常运行，但[slug]动态路由页面仅在本地localhost环境正常，部署到Vercel后点击跳转时无报错，直接跳转到首页。

相关信息 #

文件路由结构 #

链接生成代码 #

{
workshops.map((workshop) => (
   <Link href={`/workShops/${workshop.title}`}
      key={workshop.id} passHref>
        <PersonalCard workshop={workshop} />
   </Link> 
))}

（注：workshops为模拟数据）

单页组件代码 #

const SingleWorkshopPage = ({ params }) => {
   const { slug } = params; 
   const workshop = workshops.find((w) => w.title === slug); 
return 
<PersonalCardPage title={workshop.title}>
</PersonalCardPage>
};

可能的原因及解决办法 #

1. 路由大小写不匹配 #

本地开发环境（如Windows）通常不区分路径大小写，但Vercel基于Linux环境，路径大小写严格区分。你的链接路径是/workShops/xxx（首字母大写S），但路由文件夹是workshops（全小写），这会导致路由匹配失败，Next.js自动跳转到首页。

解决：
将链接路径改为全小写，同时App Router下passHref参数已无需使用，可直接移除：

{
workshops.map((workshop) => (
   <Link href={`/workshops/${workshop.title}`} key={workshop.id}>
        <PersonalCard workshop={workshop} />
   </Link> 
))}

2. 缺失静态生成配置 #

如果动态页面需要静态生成，必须添加generateStaticParams函数，告诉Next.js预生成哪些slug对应的页面，否则Vercel部署时无法正确生成目标页面，导致跳转失败。

解决：
在workshops/[slug]/page.js中添加静态生成配置：

export async function generateStaticParams() {
  // 基于模拟数据生成所有需要预渲染的slug
  return workshops.map((workshop) => ({
    slug: workshop.title,
  }));
}

3. 数据匹配容错缺失 #

如果部署环境的workshops数据与本地不一致，或者slug匹配失败，find方法会返回undefined，后续访问workshop.title会引发静默错误，导致Next.js跳转首页。

解决：
在组件中添加容错处理：

const SingleWorkshopPage = ({ params }) => {
  const { slug } = params; 
  const workshop = workshops.find((w) => w.title === slug); 

  // 找不到对应数据时返回404提示
  if (!workshop) {
    return <div>Workshop not found</div>;
  }

  return <PersonalCardPage title={workshop.title}></PersonalCardPage>;
};

4. 部署缓存问题 #

Vercel的构建缓存可能保留旧的路由配置，导致新的动态路由未生效。

解决：
进入Vercel项目控制台，点击「重新部署」并勾选「清除构建缓存」选项，重新部署项目。

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