部署
Next.js SSG 静态站
即使是静态导出,也能拥有极致性能。 只需配置 output: 'export',我们将为您提供全球 CDN 加速和自动 SSL 证书。
点击选择文件或 Zip 包
支持 .html, .zip, .pdf, .png, .jpg
为什么选择 Static Export (SSG)?
脱离 Node.js,拥抱极速
通常 Next.js 需要一个 Node.js 服务器来运行 (SSR)。这非常强大,但这也意味着昂贵的服务器成本和潜在的冷启动延迟。
通过配置 output: 'export',Next.js 会在构建时将你的每个页面预渲染成独立的 HTML 文件。 这意味着你可以把它部署在任何静态文件服务器上,享受 CDN 带来的极致加载速度。
⚡️ 就像访问图片一样快
因为不需要服务器计算,也是 HTML 文件。用户访问你的页面,就像加载一张图片一样迅速。没有数据库查询,没有 API 等待。
🛡️ 坚不可摧的安全性
没有后端逻辑意味着黑客没有攻击面。没有 SQL 注入,没有远程代码执行。静态站点天然安全。
Next.js 静态部署三部曲
配置 (Config)
打开 next.config.js,添加 output 配置。
output: 'export'构建 (Build)
运行构建命令。Next.js 会生成一个 out 文件夹 (注意不是 .next)。
npm run build部署 (Deploy)
将 out 文件夹拖入上方。上码 会自动识别这是一个 Next.js 静态导出项目。
Next.js 部署常见问题
Q 为什么我的 Image 组件报错?
Next.js 默认的 <Image> 组件需要服务器来进行图片优化。在静态导出模式下,你需要禁用这个功能。请在 next.config.js 中添加 images: { unoptimized: true }。
Q API Routes (/pages/api) 还能用吗?
不能。output: 'export' 会移除所有服务器端功能,包括 API Routes、Middleware 和 getServerSideProps。你需要将 API 逻辑迁移到独立的后端服务器或 Serverless Function。
Q getServerSideProps 报错?
静态导出不支持 `getServerSideProps`(因为没有 Server)。请改用 `getStaticProps` 来在构建时获取数据,或者在客户端使用 `useEffect` / `SWR` 获取数据。
Q 可以部署 App Router 吗?
完全支持。App Router (app 目录) 完美支持静态导出。只要你的页面没有使用动态函数(如 cookies, headers),它们就会被生成为静态 HTML。