用 Next.js 搭建静态个人网站

背景

Next.js 的静态导出（Static Export）模式非常适合个人网站、文档站这类不需要服务端渲染的场景。

为什么选择静态导出

1. 部署简单 —— 生成纯 HTML/CSS/JS 文件，丢到任何静态托管就行
2. 加载快 —— 不需要 Node.js 服务器，CDN 直接分发
3. 免费托管 —— GitHub Pages、Cloudflare Pages 都很方便

配置要点

在 next.config.ts 中设置：

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

注意事项

• Server Components 和静态生成（generateStaticParams）都能正常使用
• 不能使用 API Routes、Server Actions、ISR 等需要服务端的功能
• 图片优化需要用 unoptimized: true

小结

对于内容不频繁更新、不需要用户交互的个人网站来说，静态导出是最好的选择。