Next.js 13.4中generateStaticParams的使用方法及代码示例

核心概念 #

generateStaticParams 是 Next.js App Router 中用于**静态站点生成(SSG)**的核心API，作用是在构建阶段自动生成动态路由所需的参数，让Next.js预渲染对应路由的静态页面，大幅提升生产环境的访问性能。

可运行完整示例 #

以博客文章的列表+详情页场景为例，以下是可直接运行的完整代码：

项目结构 #

app/
├── blog/
│   ├── [slug]/
│   │   └── page.js
│   └── page.js
└── lib/
    └── posts.js

1. 模拟数据文件 lib/posts.js #

export const posts = [
  { slug: 'nextjs-13-guide', title: 'Next.js 13 App Router 完全指南', content: '这是一篇关于Next.js 13的详细教程，覆盖App Router核心特性...' },
  { slug: 'ssg-with-generatestaticparams', title: '用generateStaticParams实现静态生成', content: '本文讲解如何正确使用generateStaticParams，实现静态页面预渲染...' },
  { slug: 'react-server-components', title: 'React Server Components 核心原理', content: '深入理解React服务端组件的工作机制，以及在Next.js中的应用...' }
];

export async function getPostBySlug(slug) {
  return posts.find(post => post.slug === slug);
}

export async function getAllPostSlugs() {
  return posts.map(post => ({ slug: post.slug }));
}

2. 博客列表页 app/blog/page.js #

import { posts } from '@/lib/posts';

export default function BlogPage() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-6">我的博客</h1>
      <div className="space-y-4">
        {posts.map(post => (
          <a key={post.slug} href={`/blog/${post.slug}`} className="block p-4 border rounded hover:bg-gray-50">
            <h2 className="text-xl font-semibold">{post.title}</h2>
          </a>
        ))}
      </div>
    </div>
  );
}

3. 博客详情页（核心逻辑）app/blog/[slug]/page.js #

import { getPostBySlug, getAllPostSlugs } from '@/lib/posts';

// 构建阶段生成所有动态路由参数
export async function generateStaticParams() {
  return getAllPostSlugs();
}

// 接收params参数，渲染对应文章页面
export default async function PostPage({ params }) {
  const post = await getPostBySlug(params.slug);

  if (!post) {
    return <div className="container mx-auto p-4">文章不存在</div>;
  }

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">{post.title}</h1>
      <div className="prose max-w-none">
        {post.content}
      </div>
    </div>
  );
}

详细用法解析 #

1. 工作机制 #

• 构建时执行：仅在next build阶段运行，生产环境部署后不会重复执行；开发环境每次请求动态路由都会触发，方便实时调试
• 返回格式要求：必须返回包含动态路由参数的对象数组，对象的键需与动态路由的占位符对应（比如[slug]路由对应slug键）
• 参数传递：生成的参数会自动注入到页面组件的params属性中，供页面渲染使用

2. 关键特性 #

• 静态预渲染：Next.js会根据生成的参数，预渲染所有对应路由的静态HTML文件，部署后直接返回静态资源，无需服务器实时计算
• 增量静态再生(ISR)：可结合revalidate属性实现页面自动更新，例如在页面组件添加：

  export const revalidate = 86400; // 24小时后自动重新生成页面
  

• 支持异步数据源：函数本身是异步的，可直接调用数据库、外部API获取参数，示例：

  export async function generateStaticParams() {
    const res = await fetch('https://api.example.com/posts');
    const posts = await res.json();
    return posts.map(post => ({ slug: post.slug }));
  }
  

3. 常见注意事项 #

• 避免运行时依赖：构建阶段无法访问仅运行时可用的环境变量或资源，不要在函数中使用这类依赖
• 参数唯一性：返回的参数数组中，每个对象的键值组合必须唯一，否则会导致预渲染冲突
• 动态路由匹配：仅能在动态路由的page.js/page.tsx文件中使用，嵌套动态路由需对应生成多层参数（比如/blog/[category]/[slug]需返回{ category: 'xxx', slug: 'xxx' }）

验证方式 #

运行next build命令，查看.next/server/app/blog/[slug]目录，会发现预生成的对应slug的静态HTML文件，说明generateStaticParams已生效。

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