理解 Next.js 静态导出

Next.js 提供了一种生成完全静态网站的强大方法。通过在您的 next.config.js 中设置 output: 'export'（或通过 export const dynamic = 'error' 强制执行），您可以保证所有页面都在构建时被预渲染。

为什么选择静态导出？

1. 性能：静态 HTML 文件加载速度极快。
2. 安全性：在运行时不会暴露任何数据库或服务器逻辑。
3. 托管：可以部署在任何地方（Cloudflare Pages、GitHub Pages、Vercel、S3）。

示例配置

以下是您如何配置静态导出页面的示例：

// app/page.tsx
export const dynamic = 'error';

export default function Home() {
  return <h1>Hello, Static World!</h1>;
}

请注意 dynamic = 'error' 设置。如果组件树中的任何组件试图读取请求时的数据（如搜索参数或 cookie），构建将立即失败，而不是回退到动态渲染。这对于维持性能保证至关重要。