如何在Next.js 14中为全站设置自定义503状态码且不阻断渲染

针对你的故障转移站点需求，以下是可行的实现方式：

核心方案：使用中间件改写响应状态码 #

在Next.js 14的中间件中，无需直接返回响应中断渲染，而是通过NextResponse.rewrite让页面正常渲染，再修改响应的状态码和头信息。这种方式既保留页面内容展示，又能返回符合SEO要求的503状态码。

实现步骤 #

1. 在项目根目录创建middleware.ts（App Router）或pages/_middleware.ts（Pages Router）文件。
2. 编写中间件逻辑：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 重写请求到当前路径，确保页面正常渲染
  const response = NextResponse.rewrite(request.nextUrl);
  
  // 设置503临时不可用状态码
  response.status = 503;
  
  // 可选：添加Retry-After头，告知搜索引擎/客户端多久后重试（单位：秒）
  response.headers.set('Retry-After', '3600');
  
  return response;
}

// 匹配所有页面路径，确保全站生效
export const config = {
  matcher: ['/:path*'],
};

静态导出场景的补充说明 #

如果你的站点是通过next export生成纯静态HTML文件部署的，Next.js本身无法直接为静态文件设置HTTP状态码，需要在托管服务器层面配置：

• Nginx：修改配置文件，让所有请求返回503状态码同时返回对应HTML内容：

  server {
    root /path/to/your/static/build;
    location / {
      try_files $uri $uri/ =404;
      add_header Retry-After "3600";
      return 503;
    }
  }
  

• Vercel/Netlify：通过平台配置文件（如vercel.json、netlify.toml）设置响应规则，为所有页面添加503状态码和Retry-After头。

关键注意事项 #

• 503状态码是临时不可用标识，建议配合Retry-After头使用，帮助搜索引擎合理安排重试时间，避免影响SEO权重。
• 中间件方案适用于部署在Next.js服务器环境（如Vercel、Node.js）的站点，静态导出站点需依赖托管配置。

内容的提问来源于stack exchange，提问作者Mr. Robot