Next.js 13.4.5中如何为/blog/[slug]路由生成.html文件？

在App Router中，替代旧版getStaticPaths和getStaticProps的是generateStaticParams函数，用它可以指定动态路由需要预渲染的所有路径，从而生成对应的静态HTML文件。具体操作如下：

1. 在动态路由页面中添加generateStaticParams函数 #

在/app/blog/[slug]/page.jsx里，新增generateStaticParams异步函数，返回所有需要预渲染的slug参数数组。根据你的数据源类型，示例如下：

示例1：从本地文件获取slug #

// app/blog/[slug]/page.jsx
import fs from 'fs';
import path from 'path';

// 生成所有需要预渲染的slug参数
export async function generateStaticParams() {
  // 假设博客文件存放在app/blog/posts目录，后缀为.md
  const postsDir = path.join(process.cwd(), 'app', 'blog', 'posts');
  const filenames = fs.readdirSync(postsDir);

  return filenames.map(filename => ({
    slug: filename.replace('.md', '')
  }));
}

// 页面组件，接收params参数渲染对应内容
export default async function BlogPost({ params }) {
  const { slug } = params;
  // 根据slug读取对应博客内容
  const postContent = fs.readFileSync(
    path.join(process.cwd(), 'app', 'blog', 'posts', `${slug}.md`),
    'utf8'
  );

  return (
    <div>
      <h1>{slug}</h1>
      <div dangerouslySetInnerHTML={{ __html: postContent }} />
    </div>
  );
}

示例2：从API接口获取slug #

// app/blog/[slug]/page.jsx
// 生成所有需要预渲染的slug参数
export async function generateStaticParams() {
  const res = await fetch('https://your-api-domain.com/posts');
  const posts = await res.json();

  return posts.map(post => ({
    slug: post.slug
  }));
}

// 页面组件，基于params获取对应内容
export default async function BlogPost({ params }) {
  const { slug } = params;
  const res = await fetch(`https://your-api-domain.com/posts/${slug}`);
  const post = await res.json();

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

2. 重新执行构建命令 #

保存修改后，再次运行：

npm run build

此时/out目录下会生成每个slug对应的静态HTML文件，比如/out/blog/post-1.html、/out/blog/post-2.html，与官方文档描述一致。

关键说明 #

App Router下，动态路由不会自动推断需要预渲染的路径，必须通过generateStaticParams显式指定所有要生成的参数组合，Next.js才会在构建阶段生成对应的静态文件。

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