静态化

在 Next.js 中，纯静态化指的是将应用完全渲染为静态文件的过程，这意味着每个页面都会被预先生成为 HTML 文件，并且可以部署到任何能够提供静态文件的服务器上。Next.js 提供了多种方式来实现这一点，主要是通过静态导出功能。

静态导出

从 Next.js 9.3 版本开始，你可以使用 next export 命令或者直接在 next.config.js 中配置导出选项来生成静态版本的应用程序。不过，通常更推荐的方式是利用 Next.js 的内置支持，即通过 getStaticProps 和 getStaticPaths 函数结合 next build 来实现。

使用 next export

1. 配置导出：首先确保你的 next.config.js 中没有阻止导出的设置。默认情况下，大多数项目不需要特别配置即可导出。

2. 运行导出命令：在构建之后，你可以运行 next export 来生成静态版本的应用程序。这会在你的项目根目录下创建一个 out 文件夹，里面包含了所有生成的静态文件。

# 先构建项目
npm run build
# 然后导出静态文件
npm run export

注意：对于大多数情况，仅需执行 npm run build 即可完成静态导出，因为 next build 已经能够处理大部分静态导出的需求。next export 主要用于需要额外自定义或兼容性要求的情况。

利用 getStaticProps 和 getStaticPaths

这是现代 Next.js 应用中实现静态化的推荐方法，尤其适合内容驱动型网站（如博客、文档等）。

• getStaticProps: 在构建时预取数据并将其传递给组件。
• getStaticPaths: 定义哪些路径应该被预渲染。

下面是一个简单的例子：

// pages/posts/[id].js
export async function getStaticProps({ params }) {
  // 获取文章数据
  const post = await fetchPostById(params.id);
  return { props: { post } };
}

export async function getStaticPaths() {
  // 返回你想要预渲染的路径列表
  const posts = await fetchAllPosts();
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  return { paths, fallback: false }; // 如果未预渲染的路径被访问，则返回404页面
}

function Post({ post }) {
  return <div>{post.title}</div>;
}

export default Post;

在这个例子中，getStaticProps 负责获取特定文章的数据，而 getStaticPaths 定义了哪些文章页面应该被预渲染。这样，当你运行 npm run build 时，Next.js 会为每篇文章生成一个静态 HTML 文件。

部署静态站点

一旦你完成了静态导出，你可以将 out 目录中的内容部署到任何静态站点托管服务上，比如 Vercel（由 Next.js 的创造者维护）、Netlify、GitHub Pages 或者 AWS S3 等。

通过上述步骤，你可以轻松地将 Next.js 应用转化为纯静态站点，从而获得更好的性能和更高的可用性，同时也使得部署过程变得更加简单。