Next.js 静态导出完全指南

为什么选择静态导出

Next.js 默认支持服务端渲染（SSR），但通过 output: 'export' 配置，可以生成纯静态 HTML/CSS/JS 文件。这意味着：

• 可以托管在任何静态文件服务器上（GitHub Pages、Cloudflare Pages 等）
• 不需要 Node.js 服务器
• 加载速度快，首屏体验好
• 完全免费

配置步骤

1. 修改 next.config.js

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

2. 处理动态路由

对于使用 [slug] 这样的动态路由，需要实现 generateStaticParams：

export function generateStaticParams() {
  const slugs = getAllPostSlugs();
  return slugs.map((slug) => ({ slug }));
}

3. 构建

npm run build

构建产物会生成在 out/ 目录中。

Markdown 处理

使用 unified + remark + rehype 生态处理 Markdown：

包	用途
remark-parse	解析 Markdown
remark-gfm	支持 GFM（表格、删除线等）
remark-rehype	转换为 HTML AST
rehype-highlight	代码高亮
rehype-stringify	序列化为 HTML

部署到 GitHub Pages

使用 GitHub Actions 自动化部署，每次推送代码后自动构建并发布。详细配置见项目中的 .github/workflows/deploy.yml。

注意事项

• 静态导出不支持 Next.js 的 API Routes
• 所有数据必须在构建时可用
• 环境变量使用 NEXT_PUBLIC_ 前缀