NEXT.JS STATIC EXPORT

部署
Next.js SSG 静态站

即使是静态导出,也能拥有极致性能。 只需配置 output: 'export',我们将为您提供全球 CDN 加速和自动 SSL 证书。

配置指南
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// Optional: Disable image optimization
images: { unoptimized: true },
}

module.exports = nextConfig
Enabled Static Export

点击选择文件或 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 静态部署三部曲

01

配置 (Config)

打开 next.config.js,添加 output 配置。

output: 'export'
02

构建 (Build)

运行构建命令。Next.js 会生成一个 out 文件夹 (注意不是 .next)。

npm run build
03

部署 (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。