Next.js 静态导出指南

Next.js 提供了强大的静态导出功能，可以将整个应用预渲染为静态 HTML 文件。

为什么选择静态导出

静态导出的优势：

1. 性能优异 - 无需服务器渲染，加载速度快
2. 部署简单 - 可以部署到任何静态托管服务
3. 成本低廉 - 不需要服务器，只需静态托管
4. SEO 友好 - 所有页面都是预渲染的 HTML

配置方法

在 next.config.ts 中添加：

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

构建命令

npm run build

构建完成后，所有静态文件会生成在 out 目录中。

部署选项

可以部署到以下平台：

• Vercel - 最简单的部署方式
• Netlify - 强大的静态托管平台
• GitHub Pages - 免费的静态托管
• Cloudflare Pages - 全球 CDN 加速

注意事项

使用静态导出时的限制：

• ❌ 不支持 API Routes
• ❌ 不支持服务器端渲染 (SSR)
• ❌ 不支持 Incremental Static Regeneration (ISR)
• ✅ 只能使用 Static Site Generation (SSG)

动态路由处理

对于动态路由（如博客文章），需要使用 generateStaticParams：

export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

这样可以在构建时生成所有文章的静态页面。

总结

Next.js 的静态导出功能让我们能够享受 React 开发体验的同时，获得静态站点的性能和便捷性。非常适合博客、文档站点等内容型网站。