Nextjs 14 App Router中非页面服务端组件如何获取locale？

我正在开发基于Next.js 14 App Router的项目，使用next-i18n-router与react-i18next处理国际化，已遵循官方文档及教程完成配置。客户端组件可通过useTranslation Hook获取locale，但服务端组件仅能在页面组件中从params对象获取locale，嵌套服务端组件需通过属性透传才能获取当前locale。请问是否有方法避免这种属性透传？

页面服务端组件示例： #

import styles from './page.module.css';
import ExampleClientComponent from '@/components/ExampleClientComponent';
import initTranslations from '../i18n';

export default async function Home({ params: { locale } }) {
  const { t } = await initTranslations(locale, ['home']);

  return (
    <main className={styles.main}>
      <h1>{t('header')}</h1>
      <ExampleClientComponent />
      <ExampleServerComponent locale={locale}/>
    </main>
  );
}

期望实现效果： #

import styles from './page.module.css';
import ExampleClientComponent from '@/components/ExampleClientComponent';
import initTranslations from '../i18n';

export default async function Home({ params: { locale } }) {
  const { t } = await initTranslations(locale, ['home']);

  return (
    <main className={styles.main}>
      <h1>{t('header')}</h1>
      <ExampleClientComponent />
      <ExampleServerComponent />
      // 无需通过属性传递即可获取locale
    </main>
  );
}

解决方案 #

方法1：使用React Server Context传递locale #

React 18.2+支持Server Context，可在服务端组件间共享locale，无需手动透传：

1. 创建Server Context
   在app/i18n/locale-context.js中定义上下文：

import { createServerContext } from 'react';

// 设置默认locale（根据你的项目需求调整）
export const LocaleContext = createServerContext('locale', 'en');

2. 在根布局中注入locale
   修改根布局app/layout.js（服务端组件），从路由params获取locale并通过Provider传递：

import { LocaleContext } from './i18n/locale-context';

export default async function RootLayout({ children, params: { locale } }) {
  return (
    <html lang={locale}>
      <body>
        <LocaleContext.Provider value={locale}>
          {children}
        </LocaleContext.Provider>
      </body>
    </html>
  );
}

3. 嵌套服务端组件中获取locale
   在任意嵌套的服务端组件中，通过useContext直接获取locale：

import { useContext } from 'react';
import { LocaleContext } from '@/app/i18n/locale-context';
import initTranslations from '../i18n';

export default async function ExampleServerComponent() {
  const locale = useContext(LocaleContext);
  const { t } = await initTranslations(locale, ['example']);

  return <div>{t('content')}</div>;
}

方法2：从请求头/URL解析locale（备选方案） #

如果你的locale是通过URL路径或请求头标识的，可在服务端组件中通过next/headers工具解析：

import { headers } from 'next/headers';
import initTranslations from '../i18n';

export default async function ExampleServerComponent() {
  const headersList = headers();
  // 示例：从URL路径的第一个分段提取locale
  const pathname = headersList.get('next-url') || '';
  const locale = pathname.split('/')[1] || 'en';
  
  const { t } = await initTranslations(locale, ['example']);
  return <div>{t('content')}</div>;
}

注意：这种方式依赖URL结构或请求头配置，可靠性不如Server Context，适合简单场景。

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