Next.js不仅支持传统的服务端渲染部署模式，还支持将应用导出为纯静态文件。本文将详细介绍Next.js的静态导出功能，帮助你掌握从配置到部署的全过程。
什么是静态导出？
静态导出是指将Next.js应用编译成纯静态资源（HTML、CSS、JavaScript等），这样就可以将应用部署到任何支持静态文件托管的服务器上，而无需运行Node.js服务。这种方式类似于传统的单页应用（SPA），但又不完全相同。
静态导出的特点：
• 无需运行Node.js服务器
• 可部署到任何静态文件服务器
• 支持客户端导航（类SPA体验）
• 预渲染HTML（更好的首屏加载和SEO）
如何配置静态导出？
要启用静态导出，只需在next.config.js中添加简单的配置：
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// 可选: 更改输出目录名称，例如将 `out` 改为 `dist`
// distDir: 'dist',
}
module.exports = nextConfig运行next build后，Next.js会在out目录下生成所有静态文件。
服务端组件的处理
在静态导出模式下，服务端组件会在构建时执行并生成静态HTML。例如：
// app/page.tsx
export default async function Page() {
const res = await fetch('https://api.example.com/data')
const data = await res.json()
return <main>{data.title}</main>
}这个组件会在构建时获取数据并渲染成静态HTML，最终用户访问时可以直接看到内容，无需等待API请求。
客户端组件支持
对于需要在运行时获取数据的场景，可以使用客户端组件：
'use client'
import useSWR from 'swr'
export default function Page() {
const { data } = useSWR('/api/data', fetcher)
if (!data) return 'Loading...'
return <div>{data.title}</div>
}这种方式下，页面会先显示loading状态，然后在浏览器中获取数据并更新界面。
动态路由处理
对于动态路由，必须使用generateStaticParams函数指定所有可能的路径参数：
// app/blog/[id]/page.tsx
export async function generateStaticParams() {
const posts = await fetch('https://api.example.com/posts').then(r => r.json())
return posts.map((post) => ({
id: post.id.toString(),
}))
}这样Next.js就会为每个id生成对应的静态HTML文件。
部署注意事项
静态导出后，文件结构可能如下：
/out
├── index.html
├── 404.html
├── blog
│ ├── post-1.html
│ └── post-2.html
└── about.html需要注意的是，直接访问URL（如/about）可能会出现404错误，因为实际文件名是about.html。要解决这个问题，可以配置服务器重写规则。以Nginx为例：
server {
location / {
try_files $uri $uri.html $uri/ =404;
}
}功能限制
静态导出模式下，以下功能不支持：
• 动态路由（除非使用generateStaticParams）
• API路由（依赖请求的动态处理）
• 中间件
• 增量静态再生（ISR）
• 默认图片优化
• 草稿模式和服务器操作
最佳实践建议
1. 合理使用服务端组件：将数据获取和渲染逻辑放在服务端组件中，这样可以减少客户端JavaScript体积。
2. 图片优化：使用自定义loader（如Cloudinary）代替Next.js默认的图片优化。
3. 路由设计：提前规划好动态路由，确保能通过generateStaticParams生成所有必要的页面。
更多关于 Next.js的全栈内容请点击下面的合集:
