Next.js 13服务端组件中Axios与国际化适配问题排查

问题核心在于服务端环境下全局Axios实例的状态共享导致请求头设置不及时，甚至会被并发请求污染。Next.js服务端组件在服务器端执行时，全局Axios实例的默认配置会被所有请求共享，这不仅会引发你遇到的“先发送默认语言请求”问题，还可能导致多用户请求之间的语言头串位。

解决方案1：每次请求创建独立Axios实例 #

修改API请求函数，不再依赖全局Axios实例，而是根据传入的locale动态创建实例并设置请求头：

// 示例：api/parkingLots.ts
import axios from 'axios';

export async function getParkingLots(locale: string) {
  const instance = axios.create({
    baseURL: process.env.NEXT_PUBLIC_API_URL,
    headers: {
      'X-Accept-Language': locale
    }
  });

  return instance.get('/parking-lots');
}

在子页面的服务端组件中，直接从params获取locale并传入：

// page.tsx
export default async function ParkingLotsPage({ params }: { params: { locale: string } }) {
  const { data } = await getParkingLots(params.locale);
  // 页面渲染逻辑
}

解决方案2：请求时手动指定请求头（复用实例但不修改全局默认） #

如果不想每次创建新实例，可以在每次请求时单独设置headers，避免修改全局默认值：

// 全局Axios实例（仅配置通用项，不设置语言头）
const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL
});

export async function getParkingLots(locale: string) {
  return api.get('/parking-lots', {
    headers: {
      'X-Accept-Language': locale
    }
  });
}

同样在子页面传入locale参数调用即可。

原方案失效的原因 #

你在Layout中调用setLanguageHeader修改全局Axios实例的默认头，但服务端环境下：

1. Next.js可能对组件逻辑进行缓存，导致全局头的修改无法立即作用于当前请求
2. Node.js是单线程模型，全局Axios实例的状态会被所有请求共享，并发场景下会出现语言头互相覆盖的问题

额外优化 #

结合next-intl的特性，服务端组件直接从params中获取locale，客户端组件可使用useLocale钩子，确保每次请求都拿到当前页面的正确语言标识，彻底避免依赖全局状态。

内容的提问来源于stack exchange，提问作者Giorgi Gordiashvili