# General Translation React SDKs (gt-react, gt-next): 服务器组件 URL: https://generaltranslation.com/zh/docs/react/nextjs/server-components.mdx --- title: 服务器组件 description: 使用 General Translation 在 React Server Components 中翻译内容，并了解 gt-next 在服务器组件和客户端组件中的不同行为。 --- 在 Next.js App Router 中，`gt-next` 既适用于 React Server Components (RSC)，也适用于客户端组件。无论在哪种组件中，都从 `gt-next` 导入同一个 [``](/docs/react/reference/components/t) 组件和翻译钩子，库会根据所处环境自动选择正确的实现。异步 App Router 函数位于 `gt-next/server` 入口文件中，不适用于 Pages Router。阅读本页，了解翻译是在何处运行的，以及每类组件中分别可以使用哪些导入。关于各个服务器端 API 的单独页面，请先阅读 [`getGT`](/docs/react/nextjs/reference/functions/get-gt)。 ## 服务端与客户端导入 [#imports] 主 `gt-next` 入口会根据导入位置解析为不同的实现： * 在**同步服务器组件**中，`` 和 [``](/docs/react/reference/components/gt-provider) 使用的是服务端实现，会在服务器上加载翻译。诸如 [`useGT`](/docs/react/reference/hooks/use-gt)、[`useTranslations`](/docs/react/reference/hooks/use-translations)、[`useMessages`](/docs/react/reference/hooks/use-messages) 和 [`useLocale`](/docs/react/reference/hooks/use-locale) 之类的钩子无需 `'use client'` 边界也能工作。 * 在**异步服务器组件**中，使用 [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt) 中对应的异步函数，例如 `getGT`、`getTranslations`、`getMessages` 或 `getLocale`。 * 在**客户端组件**中 (即带有 `'use client'` 的文件) ，相同的导入会解析为共享的 `gt-react` 实现。由于导入路径完全相同，你通常不需要关心实际拿到的是哪一种实现。用 `` 包裹 JSX 后，它就会原地完成翻译，无论组件是在服务端还是客户端渲染。 ```tsx title="app/page.tsx" import { T } from 'gt-next'; export default function Page() { return (

Welcome

This content is translated automatically.

); } ``` *注意：[`getGT`](/docs/react/nextjs/reference/functions/get-gt)、[`getLocale`](/docs/react/nextjs/reference/functions/get-locale) 和 [`tx`](/docs/react/nextjs/reference/functions/tx) 等仅限服务器端使用的函数不能导入到客户端组件中。从 `'use client'` 文件导入它们会抛出错误。* ## Next.js 中的 provider [#provider] 在 Next.js App Router 中，`` 是一个服务器组件。请将它放在 root layout 中：它会在服务器端加载翻译，然后将其传递给客户端组件。你**无需**传入 `locale` 或 `translations` 属性——服务器会根据请求解析它们。 ```tsx title="app/layout.tsx" import { GTProvider, useLocale } from 'gt-next'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { const locale = useLocale(); return ( {children} ); } ``` Next.js Pages Router 的用法有所不同：通过页面属性将 `locale` 和 `translations` 传给 ``。请参阅 [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart)。 ## 翻译字符串 [#strings] 对于独立的字符串——如占位符、`aria-label` 值和 alt 文本——你需要使用翻译函数，而不是 `` 组件： * **在同步组件中**，调用来自 `gt-next` 的 `useGT` 钩子。它可用于服务端组件和客户端组件。 * **在异步 App Router 组件中**，从 [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt) `await getGT`。 ```tsx title="app/page.tsx" import { getGT } from 'gt-next/server'; export default async function Page() { const gt = await getGT(); return

{gt('Hello, world!')}

; } ``` `getGT` 和 `useGT` 用于翻译在构建时即可确定的内容。对于只有在收到请求时才能确定的内容，请改用运行时翻译。 ## 运行时翻译 [#runtime] 服务器组件也可以使用来自 `gt-next/server` 的 [`` 组件](/docs/react/nextjs/reference/components/tx) 和 [`tx` 函数](/docs/react/nextjs/reference/functions/tx)，在请求时按需翻译。只有在内容无法提前确定时才应使用它们——它们会在请求处理过程中通过服务器上的 General Translation API 进行翻译，因此比构建时翻译更慢。运行时翻译仅支持服务器端；在客户端组件中不可用。 ## 翻译的运行方式 [#how-it-runs] `gt-next` 会根据 `NODE_ENV` 检测当前环境，因此在 Production 和 Development 中的行为有所不同： * **Production.** 默认情况下，build-time 翻译会从 General Translation CDN 加载；如果你配置了[本地翻译](/docs/react/nextjs/config#translations)，也可以从本地 bundle 加载。使用 `` 和 `tx` 的按需翻译仍会在服务端组件中运行。 * **Development.** 使用开发 API 密钥时，以非默认区域设置渲染的内容会通过 General Translation API 按需翻译，并缓存在内存中，因此你可以在编辑时预览不同区域设置。这种延迟在 Production 中不会出现。 *注意：production API key (前缀为 `gtx-api-`) 会让 `gt-next` 即使在本地开发时也按 Production 模式运行，从而禁用按需热重载。*