Next.js 13多动态路由报错：generateStaticParams缺失slug参数

目录结构确认 #

你的目录结构app/[lang]/blog/page.tsx和app/[lang]/blog/[slug]/page.tsx完全符合Next.js 13 App Router的规范。[lang]作为顶级动态路由段处理国际化，嵌套的blog/[slug]负责单篇博客详情的路由，层级划分合理，没有问题。

报错原因与解决步骤 #

报错Error: A required parameter (slug) was not provided as a string in generateStaticParams for /[lng]/blog/[slug]的核心原因是：Next.js在预渲染静态页面时，无法自动推断双动态路由（[lang]+[slug]）的参数组合，即使你没在[slug]页面定义generateStaticParams，静态生成策略也要求明确提供所有动态参数的有效值。以下是具体解决方法：

1. 统一动态路由参数名 #

首先检查拼写一致性：报错中出现的[lng]与你的路由文件夹[lang]不匹配，需确保所有涉及路由参数的代码（包括页面props、参数引用、generateStaticParams返回值）都使用lang作为参数名，避免拼写错误导致参数无法识别。

2. 为[slug]页面添加generateStaticParams #

如果你的项目使用静态导出（next.config.js中配置output: 'export'）或默认静态生成（SSG），必须在app/[lang]/blog/[slug]/page.tsx中定义generateStaticParams，返回lang和slug的所有有效组合：

export async function generateStaticParams() {
  // 替换为你实际的语言列表和文章数据获取逻辑
  const supportedLanguages = ['en', 'zh'];
  const allBlogPosts = await fetchAllBlogPosts(); // 获取包含slug的所有文章数据

  // 生成所有语言与文章slug的组合参数
  return allBlogPosts.flatMap(post => 
    supportedLanguages.map(lang => ({
      lang,
      slug: post.slug
    }))
  );
}

3. 切换为动态渲染（可选） #

如果不需要预生成静态页面，可以强制Next.js在请求时动态渲染[slug]页面，跳过静态参数校验。在app/[lang]/blog/[slug]/page.tsx中添加：

// 强制动态渲染，跳过静态参数生成
export const dynamic = 'force-dynamic';

4. 检查国际化配置冲突（若有） #

如果同时使用了Next.js传统的i18n配置（在next.config.js中），建议改为纯动态路由的国际化方案，避免两种路由逻辑冲突导致参数识别异常。

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