Next.js 静态导出最佳实践

什么是静态导出？

Next.js 的静态导出（Static Export）功能可以将你的应用预渲染为纯静态 HTML 文件。这意味着你不需要运行 Node.js 服务器，只需要一个简单的 HTTP 服务器（如 Nginx）就可以部署你的网站。

为什么选择静态导出？

对于企业官网、博客、作品集等内容不频繁变化的网站，静态导出有以下优势：

• 极快的加载速度 — 纯静态文件，没有服务端渲染开销
• 极低的资源消耗 — 不需要 Node.js 进程，内存占用极小
• 高可靠性 — 没有后端服务崩溃的风险
• 部署简单 — 上传文件即可，无需复杂配置

如何配置

在 next.config.ts 中添加以下配置：

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

注意事项

静态导出不支持服务端 API 路由和中间件，如果你需要这些功能，请考虑使用传统的 SSR 部署。

图片优化

由于静态导出不支持 Next.js 的图片优化 API，需要设置 images: { unoptimized: true }。

动态路由

动态路由需要通过 generateStaticParams 预先生成所有可能的路径。例如博客文章：

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

总结

静态导出是构建高性能网站的绝佳选择。结合 Nginx 和 CDN，你可以获得极致的访问速度和稳定性。