如何在NextJS 14服务端组件中获取URL中的locale值

1. 直接读取路由/搜索参数（最推荐） #

服务端组件本身可以直接访问params和searchParams，完全不需要依赖客户端状态或中间件，就能同时适配生产环境的子路径和开发环境的查询参数场景：

适配生产环境（子路径路由） #

如果生产环境用example.com/es/这种子路径结构，只需要把路由设置为app/[locale]/page.js，直接从params里提取locale：

// app/[locale]/page.js
export default async function Page({ params }) {
  const locale = params.locale;
  // 用locale查询无头CMS数据
  const cmsData = await fetch(`your-cms-endpoint?locale=${locale}`);
  const data = await cmsData.json();
  
  return <div>{/* 渲染CMS数据 */}</div>;
}

适配开发环境（查询参数） #

如果开发环境用localhost:3000?locale=es，直接从searchParams获取：

// app/page.js
export default async function Page({ searchParams }) {
  // 给个默认值避免无参数时出错
  const locale = searchParams.locale || 'en';
  const cmsData = await fetch(`your-cms-endpoint?locale=${locale}`);
  const data = await cmsData.json();
  
  return <div>{/* 渲染CMS数据 */}</div>;
}

同时兼容两种环境 #

如果需要一套代码适配开发和生产，同时检查params和searchParams即可：

// 生产用app/[locale]/page.js，开发用根路径加查询参数
export default async function Page({ params, searchParams }) {
  // 优先取路由参数，没有则取查询参数，最后用默认值兜底
  const locale = params?.locale || searchParams?.locale || 'en';
  const cmsData = await fetch(`your-cms-endpoint?locale=${locale}`);
  const data = await cmsData.json();
  
  return <div>{/* 渲染CMS数据 */}</div>;
}

2. 用官方国际化路由方案（适合完整多语言项目） #

如果项目需要完整的国际化支持，直接用Next.js内置的国际化配置，locale会被自动处理，服务端组件可以通过请求头获取：

配置next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es'],
    defaultLocale: 'en',
    localeDetection: false, // 关闭自动检测，完全由URL控制
  },
};

module.exports = nextConfig;

在服务端组件中获取locale #

通过next/headers的headers()函数读取Next.js自动注入的请求头：

import { headers } from 'next/headers';

export default async function Page() {
  const headersList = headers();
  // 从请求头获取locale，无值时用默认值
  const locale = headersList.get('x-next-locale') || 'en';
  const cmsData = await fetch(`your-cms-endpoint?locale=${locale}`);
  const data = await cmsData.json();
  
  return <div>{/* 渲染CMS数据 */}</div>;
}

为什么不推荐你之前的尝试？ #

• 自定义Provider+状态：服务端组件无法访问任何客户端状态（包括React Context、useState），这是服务端组件的核心特性，这条路从一开始就行不通。
• 客户端组件包裹传props：/app目录下服务端组件可以作为客户端组件的子组件接收props，但完全没必要绕这个弯——服务端组件自己就能直接拿到URL参数。
• Middleware设置Cookie/请求头：这种方案稳定性差是因为中间件的执行上下文和请求生命周期的耦合问题，属于舍近求远的复杂解法。

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