Next.js Layout中客户端组件useTranslation客户端渲染失效问题

算力阿峰

2026-7-5

编辑：该问题在next-translate的公开议题中有记录，且与next-translate-plugin的相关议题关联

版本信息

next-translate: ^2.6.2
next-translate-plugin: ^2.6.2
next: 14.0.3
node: 18.17.1
yarn: 1.22.19

问题现象

在Next.js的App Router中，我在Layout组件里引入了一个客户端组件，该组件使用next-translate的useTranslation钩子。服务端渲染时翻译内容显示正常，但客户端渲染时翻译内容无法加载。奇怪的是，这个客户端组件在page.tsx中使用时功能完全正常。

相关代码示例

客户端组件（TestClient.tsx）

'use client';
import useTranslation from 'next-translate/useTranslation';
export const TestClient = () => {
  const { t } = useTranslation('common');
  return <div>This is client component, translation value: {t('test')}</div>;
};

服务端组件（TestServer.tsx）

import useTranslation from "next-translate/useTranslation";
export const TestServer = () => {
  const { t } = useTranslation("common");
  return <div>This is server component, translation value: {t("test")}</div>;
};

根布局（layout.tsx）

import { TestClient } from "@/components/TestClient";
import { TestServer } from "@/components/TestServer";
export default function RootLayout({ children}: {children: React.ReactNode;}) {
  return (
    <html lang="en">
      <body>
        <h2>Inside LAYOUT</h2>
        <TestClient />
        <TestServer />
        {children}
      </body>
    </html>
  );
}

页面组件（page.tsx）

import { TestClient } from "@/components/TestClient";
import { TestServer } from "@/components/TestServer";
const Page= () => {
  return (
    <div>
      <h2>Inside PAGE</h2>
      <TestServer />
      <TestClient />
    </div>
  );
};