Next.js 12中next.config.js自定义HTTP Headers不生效求助

为什么自定义Header不生效？ #

你配置的headers()函数在Next.js 12中不会在静态导出模式下生效——因为你设置了output: 'export'，这种模式会生成纯静态HTML/CSS/JS资源，没有Node.js服务器运行时来处理headers()配置逻辑。所有静态资源直接由托管服务器（如Nginx、Apache）返回，Next.js的服务器端配置不会被执行。

解决自定义Header生效的两种方案 #

方案1：移除静态导出模式（推荐，适合需要Next.js服务器能力的场景） #

删除output: 'export'配置，使用Next.js自带的开发服务器或部署到支持Next.js的平台，此时headers()配置会正常生效。

调整后的next.config.js示例：

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*{/}?',
        headers: [
          {
            key: 'x-hello',
            value: 'world',
          },
        ],
      },
    ];
  },
  reactStrictMode: true,
  distDir: 'build',
  images: {
    unoptimized: true,
    // allowFutureImage: true,
  },
  i18n: {
    locales: ['en-PT', 'pt', 'es-ES', 'ch', 'fr-CH', 'it-CH', 'en-CH', 'en-ES'],
    localeDetection: false,
    defaultLocale: 'es-ES',
  },
  webpack(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      module: false,
    };

    return config;
  }
};

后续实现Locale Header的优化方案

如果要在Header中携带当前请求的locale，使用Next.js 12 Middleware会更灵活（比headers()函数更易处理动态locale）：

1. 在pages目录下创建_middleware.js文件：

import { NextResponse } from 'next/server';

export function middleware(req) {
  // 获取当前请求的locale，默认值为配置的defaultLocale
  const currentLocale = req.nextUrl.locale || 'es-ES';
  
  const response = NextResponse.next();
  // 设置自定义Header
  response.headers.set('x-hello', 'world');
  response.headers.set('x-locale', currentLocale);
  
  return response;
}

// 匹配所有路由（可根据需求调整）
export const config = {
  matcher: '/:path*{/}?',
};

Middleware会在每个请求到达页面前执行，自动为所有路由添加指定Header，包括动态获取的locale值。

方案2：保留静态导出模式（适合纯静态站点） #

如果必须使用静态导出，需要在托管服务器的配置中添加自定义Header，因为静态资源由服务器直接返回，Next.js无法干预。以下是常见服务器的配置示例：

Nginx配置

在站点的Nginx配置文件中添加：

# 为所有静态资源添加基础Header
location / {
  add_header x-hello world;
}

# 根据静态导出的locale路径，设置x-locale Header
location ~ ^/([a-z-]+)/ {
  add_header x-locale $1;
}

# 为默认locale（es-ES）设置Header
location = / {
  add_header x-locale es-ES;
}

Apache配置

在.htaccess文件中添加：

# 添加x-hello Header
Header set x-hello "world"

# 根据路径设置x-locale Header
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/([a-z-]+)/
RewriteRule .* - [E=LOCALE:%1]
Header set x-locale "%{LOCALE}e" env=LOCALE

# 默认locale设置
Header set x-locale "es-ES" env=!LOCALE

内容的提问来源于stack exchange，提问作者aharo vishinsky