如何在客户端组件嵌套的服务端组件中正确使用next-intl？

核心问题原因 #

当SSR组件（Contact.jsx）被嵌套在CSR组件（Menu.jsx）中时，客户端组件的渲染上下文无法直接继承服务端的国际化配置，导致useTranslations钩子在嵌套场景下无法正常获取翻译资源。

优化方案 #

方案1：将Contact.jsx改为兼容双环境组件 #

把Contact组件改造为既支持服务端直接使用，也能在客户端组件中正常工作的通用组件，通过createTranslator替代useTranslations，手动适配不同环境的配置来源：

// components/Contact.jsx
import { createTranslator } from 'next-intl';
import { useLocale, useMessages } from 'next-intl/client';

export default function Contact({ locale: propLocale, messages: propMessages }) {
  // 客户端环境下从hooks获取配置，服务端使用传入的props
  const locale = propLocale || useLocale();
  const messages = propMessages || useMessages();
  
  const t = createTranslator({ locale, messages });

  return (
    <div>
      <p>{t('contact.title')}</p>
      <p>{t('contact.description')}</p>
    </div>
  );
}

// 服务端使用（page.js）
import Contact from '@/components/Contact';
import { getMessages } from 'next-intl/server';

export default async function Page({ params: { locale } }) {
  const messages = await getMessages({ locale });
  return <Contact locale={locale} messages={messages} />;
}

// 客户端组件（Menu.jsx）中使用
'use client';
import Contact from '@/components/Contact';

export default function Menu() {
  return (
    <nav>
      <Contact />
    </nav>
  );
}

方案2：用客户端上下文传递国际化配置 #

通过自定义上下文提供者，将客户端的国际化配置传递给嵌套的SSR组件，避免重复传参：

// components/IntlClientContext.jsx
'use client';
import { createContext, useContext } from 'react';
import { useLocale, useMessages } from 'next-intl/client';

const IntlContext = createContext(null);

export function IntlClientProvider({ children }) {
  const locale = useLocale();
  const messages = useMessages();
  return (
    <IntlContext.Provider value={{ locale, messages }}>
      {children}
    </IntlContext.Provider>
  );
}

export function useIntlContext() {
  const context = useContext(IntlContext);
  if (!context) throw new Error('useIntlContext必须在IntlClientProvider内使用');
  return context;
}

改造Contact组件：

// components/Contact.jsx
import { createTranslator } from 'next-intl';
import { useIntlContext } from './IntlClientContext';
import { useTranslations } from 'next-intl';

export default function Contact() {
  try {
    // 客户端嵌套场景：从上下文取配置
    const { locale, messages } = useIntlContext();
    const t = createTranslator({ locale, messages });
    return renderContact(t);
  } catch {
    // 服务端直接使用useTranslations
    const t = useTranslations('contact');
    return renderContact(t);
  }
}

function renderContact(t) {
  return (
    <div>
      <p>{t('title')}</p>
      <p>{t('description')}</p>
    </div>
  );
}

客户端组件中使用：

// Menu.jsx (CSR)
'use client';
import { IntlClientProvider } from './IntlClientContext';
import Contact from './Contact';

export default function Menu() {
  return (
    <IntlClientProvider>
      <nav>
        <Contact />
      </nav>
    </IntlClientProvider>
  );
}

方案3：统一为客户端组件 #

如果Contact组件不需要服务端渲染特性（如数据预取、SEO优化），直接改为客户端组件是最简洁的方案：

// components/Contact.jsx
'use client';
import { useTranslations } from 'next-intl/client';

export default function Contact() {
  const t = useTranslations('contact');
  return (
    <div>
      <p>{t('title')}</p>
      <p>{t('description')}</p>
    </div>
  );
}

方案选择建议 #

• 若Contact必须保留服务端渲染能力，优先选方案1，逻辑清晰无额外上下文层级
• 若存在多个类似混合场景，方案2的上下文模式可减少重复代码
• 若服务端渲染对Contact非必须，方案3是最优极简实现

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