Next.js 14 App Router动态路由SSG生产构建错误求助

核心误解澄清 #

你之前的认知有误：App Router完全支持generateStaticParams()函数，它正是为App Router的动态路由在静态导出场景下设计的，并非仅适用于旧的Pages Router。当配置output: export时，Next.js需要提前知晓所有动态路由的参数值，才能生成对应的静态HTML文件，因此必须提供该函数。

修复步骤 #

在你的src/app/projects/[id]/page.tsx文件中，添加generateStaticParams()函数，返回所有项目的ID列表即可。示例代码如下：

// src/app/projects/[id]/page.tsx
// 假设你有获取所有项目ID的逻辑，比如从本地JSON文件或CMS读取
async function getAllProjectIds() {
  // 示例：从本地JSON文件获取项目数据
  const projects = await import('../../../../data/projects.json')
  return projects.default.map(project => ({
    id: project.id.toString(), // 确保ID为字符串类型
  }))
}

// 生成所有动态路由所需的参数
export async function generateStaticParams() {
  return getAllProjectIds()
}

// 页面组件，通过params获取当前项目ID
export default async function ProjectPage({ params }: { params: { id: string } }) {
  // 根据ID获取对应项目详情
  async function getProjectDetail(id: string) {
    const projects = await import('../../../../data/projects.json')
    return projects.default.find(project => project.id === id)
  }

  const project = await getProjectDetail(params.id)

  if (!project) {
    return <div>项目不存在</div>
  }

  return (
    <div>
      <h1>{project.title}</h1>
      <p>{project.description}</p>
      {/* 项目其他内容 */}
    </div>
  )
}

为什么loader函数无效？ #

loader是旧Pages Router的API，App Router中已不再使用。在App Router的页面组件中，直接通过组件参数params获取动态路由值，并在组件内部（或单独函数中）获取对应数据即可。

额外注意事项 #

• 确保generateStaticParams()返回的参数对象键名与动态路由文件名一致（此处是id，对应[id]）。
• 若项目数据来自外部API，需确保构建时API可访问，且能正确获取所有ID。
• 若无法提前知晓所有路由ID（需动态生成），则不能使用output: export，需改用Vercel部署或其他支持服务端渲染的部署方式。

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