Next.js output: 'export' 模式需 Nginx rewrite 规则支持动态路由:location / { try_files $uri $uri/ $uri/index.html /index.html; },并排除/_next/、/static/等静态资源路径,同时建议统一去除尾斜杠以保障 SEO。

Next.js 应用部署在 Nginx 上时,若使用了 app router 或启用了 dynamic routes(如 /blog/[slug]),默认的静态托管方式无法正确处理客户端路由跳转和 SSR/SSG 页面请求,必须通过 Nginx 的重写规则(rewrite)将所有非静态资源的请求代理回 Next.js 的 Node 服务(或适配器输出的静态文件 + fallback 逻辑)。否则会出现 404、页面白屏、SEO 路径不生效等问题。
理解 Next.js 输出模式与 Nginx 匹配逻辑
Next.js 构建后有三种常见部署形态:
-
Server-Side Rendering (SSR):需 Node.js 服务(如
next start),Nginx 仅作反向代理,不涉及 rewrite -
Static HTML Export (
next export):完全静态,但不支持动态路由和 ISR,已逐步被 App Router 的output: 'export'取代 -
App Router + Static Output(推荐):构建为混合输出——
.next/static存静态资源,.next/server/app下有 route handlers 和生成的 HTML/JSON,配合output: 'standalone'或output: 'export'需要精准 rewrite 规则
绝大多数 SEO 友好部署采用第三种:构建为 standalone(含最小 Node server)或纯静态 export + fallback。本文聚焦 output: 'export' 模式下的 Nginx rewrite 配置,因其轻量、CDN 友好、利于 SEO 路径解析。
关键 rewrite 规则:让 /about 和 /blog/hello-world 正确命中 HTML
Next.js output: 'export' 会将每个路由导出为 path/index.html(如 /blog/hello-world/index.html)。Nginx 默认只找 /blog/hello-world 文件,找不到就 404。需用 rewrite 将路径自动补上 /index.html,并支持深层嵌套和动态段。
在 location / 块中添加以下逻辑:
location / {
try_files $uri $uri/ $uri/index.html /index.html;
}
说明:
-
$uri:匹配原始路径,如/blog/hello-world→ 查找该文件(无扩展名,通常不存在) -
$uri/:尝试作为目录访问(触发 index.html 自动索引,但需开启index index.html) -
$uri/index.html:显式查找对应路径下的 index.html(核心!支持/blog/[slug]导出后的实际结构) -
/index.html:兜底,确保 SPA 路由(如前端 JS 控制的 /settings)也能加载主 HTML,避免 404
⚠️ 注意:try_files 是原子操作,一旦某一项命中即停止,不会继续执行后续项。因此顺序不能颠倒。
排除静态资源,避免误 rewrite
JS/CSS/图片等静态资源应直接返回,不应被 rewrite 到 index.html。否则浏览器拿到 HTML 当 JS 解析,报错且阻塞渲染。
在 server 块中,优先定义静态资源 location:
location ^~ /_next/ {
expires 1y;
add_header Cache-Control "public, immutable";
alias /var/www/my-next-app/.next/;
}
location ^~ /static/ {
expires 1y;
add_header Cache-Control "public, immutable";
alias /var/www/my-next-app/static/;
}
说明:
-
^~表示前缀匹配且优先级高于正则,确保/_next/static/chunks/...不落入location /的 rewrite 流程 -
alias替代root,避免路径拼接错误(root会拼完整路径,alias直接替换匹配部分) -
expires和Cache-Control提升 CDN 缓存效率,对 SEO 加载性能有直接影响
SEO 路径友好补充:强制 trailing slash 或去除(按需选一)
Google 对 /about 和 /about/ 视为不同 URL,可能分散权重。Next.js 默认导出不带尾斜杠(/about/index.html),但用户可能输入带斜杠的路径。建议统一策略:
-
统一不带斜杠(推荐):添加 301 重定向,把
/path/→/path -
统一带斜杠:修改
next.config.js中trailingSlash: true,再配合 Nginx rewrite 补/index.html
示例(去尾斜杠):
location ~ ^(.+)/$ {
return 301 $1;
}
放在 location / 之前,确保先拦截并重定向,避免被 try_files 错误处理。
配置完成后,重启 Nginx,验证 curl -I https://yoursite.com/blog/my-post 返回 200 且 Content-Type 为 text/html;检查 Chrome DevTools Network 标签页,静态资源状态码为 200,路由页面不报 404 —— SEO 友好的路径解析就已就绪。


















