Next.js 静态导出

Next.js 是一个功能强大的 React 框架，支持多种渲染策略，包括静态生成（Static Generation）、服务器端渲染（Server-Side Rendering）和客户端渲染（Client-Side Rendering）。其中，静态导出是一种将 Next.js 应用预渲染为静态 HTML 文件的技术，适合部署到任何静态托管服务（如 Vercel、Netlify、GitHub Pages 等）。

什么是静态导出？

静态导出是指将 Next.js 应用中的所有页面预渲染为静态 HTML 文件。这些文件可以直接部署到静态托管服务上，无需运行 Node.js 服务器。静态导出的页面在构建时生成，因此加载速度非常快，适合内容不频繁变化的网站。

备注

静态导出与静态生成（Static Generation）不同。静态生成是在请求时生成 HTML 文件，而静态导出是在构建时生成所有 HTML 文件。

如何使用静态导出？

要启用静态导出功能，需要在 next.config.js 中配置 output 选项为 export。以下是一个简单的配置示例：

// next.config.js
module.exports = {
  output: 'export',
};

配置完成后，运行 next build 命令时，Next.js 会将所有页面预渲染为静态 HTML 文件，并生成一个 out 目录，其中包含所有静态文件。

示例：静态导出一个简单的页面

假设我们有一个简单的 Next.js 页面 pages/index.js：

// pages/index.js
export default function Home() {
  return <h1>欢迎来到我的静态网站！</h1>;
}

运行 next build 后，Next.js 会生成一个 out 目录，其中包含 index.html 文件。你可以将这个目录部署到任何静态托管服务上。

静态导出的实际应用场景

静态导出非常适合以下场景：

博客网站：博客内容通常不会频繁变化，静态导出可以显著提高加载速度。
文档网站：如 Docusaurus 生成的文档网站，内容在构建时确定，适合静态导出。
营销页面：如产品介绍页、活动页等，内容相对固定，适合静态导出。

案例：静态导出一个博客网站

假设我们有一个简单的博客网站，包含两个页面：首页和博客详情页。以下是代码示例：

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>我的博客</h1>
      <ul>
        <li><a href="/blog/first-post">第一篇博客</a></li>
        <li><a href="/blog/second-post">第二篇博客</a></li>
      </ul>
    </div>
  );
}

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>{slug}</h1>
      <p>这是 {slug} 的内容。</p>
    </div>
  );
}

运行 next build 后，Next.js 会生成以下静态文件：

out/
├── index.html
├── blog/
│   ├── first-post.html
│   └── second-post.html

你可以将这些文件部署到任何静态托管服务上。

静态导出的限制

虽然静态导出非常强大，但它也有一些限制：

动态路由：静态导出不支持动态路由（如 pages/blog/[slug].js），除非你为每个可能的路径生成静态文件。
API 路由：静态导出不支持 API 路由（如 pages/api/hello.js），因为 API 路由需要运行 Node.js 服务器。
客户端数据获取：静态导出不支持在构建时获取客户端数据（如 getServerSideProps 或 getInitialProps），因为这些函数需要在服务器端运行。

警告

如果你需要支持动态路由或 API 路由，建议使用静态生成或服务器端渲染。

总结

Next.js 的静态导出功能非常适合构建内容不频繁变化的静态网站。通过预渲染所有页面为静态 HTML 文件，你可以将网站部署到任何静态托管服务上，从而获得极快的加载速度和良好的 SEO 表现。

附加资源

练习

创建一个简单的 Next.js 应用，并启用静态导出功能。
部署生成的静态文件到 GitHub Pages 或 Netlify。
尝试为动态路由生成静态文件，并观察其行为。

通过以上练习，你将更好地理解 Next.js 静态导出的工作原理和应用场景。

什么是静态导出？​

如何使用静态导出？​

示例：静态导出一个简单的页面​

静态导出的实际应用场景​

案例：静态导出一个博客网站​

静态导出的限制​

总结​

附加资源​

练习​