如何在 Nextjs 14 应用程序路由器上的非页面服务器端组件中获取区域设置？

Question

我正在开发一个新的Nextjs 14应用程序路由器项目，使用next-i18n-router和react-i18next来处理本地化。我遵循了 nextjs 文档和本地化设置中提供的教程：

• https://nextjs.org/docs/app/building-your-application/routing/internationalization
• https://i18nexus.com/tutorials/nextjs/react-i18next

我可以通过 useTranslation Hook 访问客户端组件的语言环境，但是在服务器端组件中，我仅在页面组件中的 params 对象中获取语言环境，然后我必须进行道具钻取，直到到达目标组件才能访问当前语言环境嵌套的服务器端组件。

有什么方法可以避免在服务器端组件中进行道具钻探以访问当前语言环境？

这是页面服务器端组件的示例：

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 /> // To have a way to get access to locale without passing it as prop
    </main>
  );
}

Answer 1

我已经通过从请求标头中提取语言环境来解决 prop-drilling

这是示例服务器端组件，未将 local 作为 prop 传递：

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

export default async function ExampleServerComponent() {
  const reqHeaders = headers();
  const cookie = reqHeaders.get("Cookie");
  
  local = cookie?.split("=").at(1); // "en" | "ar";
  const { t } = await initTranslations(locale, ['home']);

  return (
      <h1>{t('title')}</h1>
  );
}