Next.js 14.X App Router动态路由静态生成失效问题咨询

核心原因：App Router 与 Page Router 的SSG逻辑差异 #

App Router 下动态路由的静态生成依赖**generateStaticParams函数**，而非 Page Router 中的getStaticPaths/getStaticProps。如果没有导出该函数，即使设置dynamicParams=true，构建时也会默认生成服务端路由。

具体解决步骤 #

1. 导出generateStaticParams预生成路由参数
   这是App Router下动态路由静态生成的核心，必须在动态路由的page.tsx中导出该函数，返回所有需要预渲染的参数组合：

   // app/[slug]/page.tsx
   export async function generateStaticParams() {
     // 替换为你的数据源：从CMS、数据库或本地文件获取动态参数
     const dynamicSlugs = ['post-1', 'post-2', 'post-3'];
     return dynamicSlugs.map(slug => ({ slug }));
   }
   
   export default function DynamicPage({ params }: { params: { slug: string } }) {
     return <div>当前路由：{params.slug}</div>;
   }
   

2. 显式强制静态渲染
   若页面中存在可能触发动态渲染的逻辑（如隐式依赖服务端API），可添加dynamic配置强制静态生成：

   export const dynamic = 'force-static'; // 强制页面静态渲染，覆盖默认的auto逻辑
   

3. 排查动态依赖
   检查页面组件中是否使用了以下会触发服务端动态渲染的API：

   • cookies()、headers()
   • useSearchParams()（服务端组件中使用会触发动态，移至'use client'组件可避免）
   • 未添加缓存配置的实时fetch请求
     若必须使用这些逻辑，将其移至标记'use client'的客户端组件中，避免影响页面的静态生成。

4. 正确理解dynamicParams的作用
   dynamicParams=true并非控制构建时的静态生成，而是用于生产环境中：当访问未被generateStaticParams预生成的路由时，Next.js会动态生成该路由的静态页面并缓存（增量静态再生），而非直接返回404或服务端渲染。

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