Next.js 静态导出（Static Export）适合内容站、博客、文档等场景，生成纯静态 HTML/CSS/JS，可部署到 OSS、ECS、Vercel 等平台。核心优势是：加载速度快、SEO 友好、成本低。本文结合实际案例，介绍静态导出的配置优化、部署方案对比与实践步骤。
一、静态导出为何重要：数据与优势
静态站点相比动态站点，加载速度更快、成本更低、扩展性更好。根据 Netlify 2024 年报告，静态站点平均加载时间比动态站点快 40–60%。
| 指标 | 动态站点（SSR） | 静态站点（SSG） | 改善程度 |
|---|---|---|---|
| 首屏加载时间 | 1.5–3 秒 | 0.5–1.5 秒 | 降低 50–60% |
| 服务器成本 | 需运行 Node.js 服务 | 仅需静态托管 | 降低 70–90% |
| 扩展性 | 需扩容服务器 | CDN 自动扩展 | 显著提升 |
| SEO 表现 | 良好（需 SSR） | 优秀（预渲染） | 提升 10–20% |
数据来源：Netlify、Vercel、Next.js 官方数据（综合整理）。
Next.js 静态导出适用于内容站、博客、文档、营销页等场景。下表对比了不同部署方案：
| 部署方案 | 成本 | 配置复杂度 | CDN 支持 | 适用场景 |
|---|---|---|---|---|
| OSS（对象存储） | 极低（按存储+流量） | 低 | 是（需配置） | 内容站、博客、文档 |
| ECS（云服务器） | 中等（固定成本） | 中 | 是（需配置 Nginx） | 需要服务器端功能 |
| Vercel | 低（免费额度） | 极低（自动） | 是（自动） | 快速部署、全球加速 |
| GitHub Pages | 免费 | 低 | 是（自动） | 开源项目、个人站点 |
二、Next.js 静态导出配置
Next.js 静态导出需要在 next.config.js 中配置 output: "export"。以下介绍关键配置项。
2.1 基础配置
// next.config.js
const nextConfig = {
output: "export",
images: {
unoptimized: true, // 静态导出需禁用图片优化
},
trailingSlash: false, // 或 true，根据部署平台要求
basePath: "", // OSS 子目录部署时设置，如 "/main"
assetPrefix: "", // 静态资源前缀，CDN 时使用
};
2.2 BASE_PATH 配置
若部署到子目录（如 OSS 的 /main），需设置 basePath 和 assetPrefix。构建时通过环境变量传入：
// 构建命令
BASE_PATH=/main npm run build
三、OSS 部署方案
OSS（对象存储）是静态站点的高性价比选择，成本低、扩展性好。以下介绍 OSS 部署实践。
说明：权重基于对 OSS 部署方案的综合评估，非官方披露数据，仅供参考。
3.1 OSS 部署步骤
- 构建静态文件：
npm run build，生成out/目录。 - 上传到 OSS：将
out/目录内容上传到 OSS Bucket。 - 配置静态网站托管：启用 OSS 静态网站托管功能，设置默认首页（index.html）。
- 配置 CDN：绑定 CDN 域名，配置缓存策略（HTML 短期缓存，静态资源长期缓存）。
- 配置域名：将自定义域名绑定到 CDN，配置 SSL 证书。
3.2 OSS 缓存配置
建议配置：HTML 文件缓存 0–300 秒（确保内容更新及时），CSS/JS 缓存 1 年（文件名带 hash），图片缓存 30 天。更新时通过文件名 hash 或版本号控制缓存失效。
四、ECS 部署方案
ECS（云服务器）适合需要服务器端功能或自定义配置的场景。以下介绍 ECS 部署实践。
| 组件 | 配置 | 说明 |
|---|---|---|
| Web 服务器 | Nginx | 配置静态文件服务、Gzip、缓存 |
| SSL 证书 | Let's Encrypt | 免费证书，自动续期 |
| CDN | 阿里云 CDN、腾讯云 CDN | 加速静态资源，降低服务器压力 |
| 监控 | Prometheus、Grafana | 监控服务器性能、访问量 |
4.1 Nginx 配置示例
server {
listen 80;
server_name example.com;
root /var/www/out;
index index.html;
# Gzip 压缩
gzip on;
gzip_types text/css application/javascript application/json;
# 缓存配置
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# SPA 路由支持
location / {
try_files $uri $uri/ /index.html;
}
}五、部署方案对比
以下对比 OSS 与 ECS 两种主流方案：
| 维度 | OSS | ECS |
|---|---|---|
| 成本 | 极低（按存储+流量） | 中等（固定服务器成本） |
| 配置复杂度 | 低（上传即可） | 中（需配置 Nginx） |
| 扩展性 | 自动（CDN） | 需手动扩容 |
| 灵活性 | 低（仅静态） | 高（可运行服务） |
| 运维成本 | 零 | 需维护服务器 |
| 适用场景 | 纯静态站点 | 需要服务器功能 |
六、静态导出优化技巧
以下技巧可进一步提升静态站点性能：
- 代码分割：Next.js 自动代码分割，确保路由级分割生效。
- 图片优化：静态导出时使用
unoptimized: true，自行优化图片（WebP、压缩）。 - 资源预加载：使用
<link rel="preload">预加载关键资源。 - CDN 配置：将静态资源部署到 CDN，配置合适的缓存策略。
- BASE_PATH 处理：子目录部署时正确配置
basePath，确保资源路径正确。
七、静态导出实施步骤
按以下步骤实施 Next.js 静态导出：
- 配置 next.config.js：设置
output: "export"、images.unoptimized: true。 - 处理动态路由：使用
generateStaticParams预生成所有路由。 - 处理图片：使用
next/image时需设置unoptimized，或使用普通<img>。 - 构建静态文件：运行
npm run build，检查out/目录。 - 选择部署方案：根据需求选择 OSS 或 ECS。
- 配置 CDN：绑定 CDN 域名，配置缓存策略。
- 测试验证：访问部署后的站点，验证功能正常、资源加载正确。
八、静态导出自检清单
静态导出部署前，可按下列项自检：
| 检查项 | 优先级 | 是/否 |
|---|---|---|
| 已配置 output: "export" | 必须 | □ |
| 已设置 images.unoptimized: true | 必须 | □ |
| 已处理所有动态路由（generateStaticParams） | 必须 | □ |
| 已配置 basePath（如需要） | 必须 | □ |
| 构建成功，out/ 目录完整 | 必须 | □ |
| 已上传到部署平台（OSS/ECS） | 必须 | □ |
| 已配置 CDN 和缓存策略 | 建议 | □ |
| 已测试所有页面和功能 | 必须 | □ |
九、小结
Next.js 静态导出适合内容站、博客、文档等场景，可部署到 OSS、ECS 等平台。核心是正确配置、选择部署方案、优化性能三方面，合理配置可显著提升加载速度和 SEO 表现。
落地时可从配置 next.config.js、处理动态路由、处理图片、构建静态文件、选择部署方案、配置 CDN、测试验证七步入手，结合自检清单逐步完善。若需要优化网站性能以提升用户体验，可参考本站《网站性能优化实践》；若需要构建 Serverless 架构以降低运维成本，可阅读《Serverless 架构实践指南》。