Next.js 15中如何在嵌套路由中使用generateStaticParams

你需要在两个位置添加generateStaticParams函数，分别对应不同层级的动态路由：

1. 处理/en、/de根语言页面 #

首先在app/[lang]/目录下创建page.tsx文件（你的现有结构里缺少这个文件），在其中定义generateStaticParams返回语言参数：

// app/[lang]/page.tsx
export async function generateStaticParams() {
  return [
    { lang: 'en' },
    { lang: 'de' },
  ];
}

export default function LangHomePage({ params }: { params: { lang: string } }) {
  // 这里编写语言根页面的内容逻辑
  return <main>当前语言：{params.lang} - 主页内容</main>;
}

2. 处理带slug的页面（/en/blog/post-1、/de/blog/post-1、/en/contact） #

在app/[lang]/[...slug]/page.tsx文件中添加generateStaticParams，返回语言与slug的组合参数：

// app/[lang]/[...slug]/page.tsx
export async function generateStaticParams() {
  return [
    // 对应 /en/blog/post-1
    { lang: 'en', slug: ['blog', 'post-1'] },
    // 对应 /de/blog/post-1
    { lang: 'de', slug: ['blog', 'post-1'] },
    // 对应 /en/contact
    { lang: 'en', slug: ['contact'] },
  ];
}

export default function DynamicSlugPage({ params }: { params: { lang: string; slug: string[] } }) {
  // 这里编写动态slug页面的内容逻辑
  const pagePath = params.slug.join('/');
  return <main>当前页面：{params.lang}/{pagePath}</main>;
}

关键说明 #

• generateStaticParams必须和对应的动态路由组件放在同一个文件中，Next.js会根据函数返回的参数组合，预渲染出对应的静态页面。
• 运行next build时，Next.js会自动生成你指定的所有URL的静态资源，完成预渲染。

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