Next.js中next-intl useTranslations自定义组件服务端报错求助

你的组件使用了useTranslations这个React钩子，而服务端组件（Server Components）不允许使用任何React hooks，这就是报错的核心原因。下面是几种可行的解决方式：

方式一：将自定义翻译组件转为客户端组件 #

在组件顶部添加'use client'指令，明确标记这是一个客户端组件，即可正常使用useTranslations钩子：

'use client'; // 新增该行标记
import { useTranslations } from "next-intl";

const Translations = ({ children }) => {
  const { t } = useTranslations();

  return t(children);
};

export default Translations;

方式二：在服务端组件中直接使用服务端翻译API #

如果需要在服务端组件内处理翻译，可使用next-intl提供的服务端专属方法getTranslations，无需依赖客户端钩子：

import { getTranslations } from 'next-intl/server';

// 这是一个服务端组件
async function ServerComponent() {
  const t = await getTranslations();
  return <div>{t('your.translation.key')}</div>;
}

export default ServerComponent;

方式三：调整组件结构，分离服务端与客户端逻辑 #

如果服务端组件需要复用翻译逻辑，可以将翻译key通过props传递给客户端翻译组件，避免在服务端组件中直接调用hooks：

// 服务端组件
function ServerComponent() {
  // 处理服务端逻辑，传递翻译key给客户端组件
  return <Translations>your.translation.key</Translations>;
}

// 客户端翻译组件（已标记为客户端组件）
'use client';
import { useTranslations } from "next-intl";

const Translations = ({ children }) => {
  const { t } = useTranslations();
  return t(children);
};

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