# General Translation React SDKs (gt-react, gt-next): Server components URL: https://generaltranslation.com/en-US/docs/react/nextjs/server-components.mdx --- title: Server components description: Translate content in React Server Components with General Translation, and understand how gt-next behaves in server versus client components. --- In the Next.js App Router, `gt-next` works in both React Server Components (RSC) and client components. The same [``](/docs/react/reference/components/t) component and translation hooks are imported from `gt-next` in either place, and the library picks the right implementation for the environment. Async App Router functions live in the `gt-next/server` entry point, which does not work with the Pages Router. Read this page to understand where translation runs and which imports are available in each kind of component. For individual server API pages, start with [`getGT`](/docs/react/nextjs/reference/functions/get-gt). ## Server and client imports [#imports] The main `gt-next` entry resolves to a different implementation depending on where you import it: - In a **synchronous server component**, `` and [``](/docs/react/reference/components/gt-provider) are server implementations that load translations on the server. Hooks such as [`useGT`](/docs/react/reference/hooks/use-gt), [`useTranslations`](/docs/react/reference/hooks/use-translations), [`useMessages`](/docs/react/reference/hooks/use-messages), and [`useLocale`](/docs/react/reference/hooks/use-locale) work without a `'use client'` boundary. - In an **async server component**, use the corresponding async function from [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt), such as `getGT`, `getTranslations`, `getMessages`, or `getLocale`. - In a **client component** (a file with `'use client'`), the same imports resolve to the shared `gt-react` implementations. Because the import path is identical, you rarely think about which one you get. Wrap JSX in `` and it translates in place, whether the component renders on the server or the client. ```tsx title="app/page.tsx" import { T } from 'gt-next'; export default function Page() { return (

Welcome

This content is translated automatically.

); } ``` *Note: server-only functions such as [`getGT`](/docs/react/nextjs/reference/functions/get-gt), [`getLocale`](/docs/react/nextjs/reference/functions/get-locale), and [`tx`](/docs/react/nextjs/reference/functions/tx) cannot be imported into a client component. Importing them from a `'use client'` file throws.* ## The provider in Next.js [#provider] In the Next.js App Router, `` is a server component. Place it in your root layout and it loads translations on the server, then passes them to your client components. You do **not** pass `locale` or `translations` props — the server resolves them from the request. ```tsx title="app/layout.tsx" import { GTProvider, useLocale } from 'gt-next'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { const locale = useLocale(); return ( {children} ); } ``` The Next.js Pages Router works differently: pass `locale` and `translations` to `` through page props. See the [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart). ## Translating strings [#strings] For standalone strings — placeholders, `aria-label` values, alt text — you need a translation function rather than the `` component: - **In a synchronous component**, call the `useGT` hook from `gt-next`. It works in server and client components. - **In an async App Router component**, `await getGT` from [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt). ```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` and `useGT` translate content that is known at build time. For content only known at request time, use runtime translation instead. ## Runtime translation [#runtime] Server components can also translate on demand at request time with the [`` component](/docs/react/nextjs/reference/components/tx) and [`tx` function](/docs/react/nextjs/reference/functions/tx) from `gt-next/server`. Use these only when the content is not known ahead of time — they translate through the General Translation API on the server as the request runs, so they are slower than build-time translation. Runtime translation is server-only; it is not available in client components. ## How translation runs [#how-it-runs] `gt-next` behaves differently in production and development, detected from `NODE_ENV`: - **Production.** Build-time translations are loaded from the General Translation CDN by default, or from your local bundle if you configure [local translations](/docs/react/nextjs/config#translations). On-demand translation with `` and `tx` still runs in server components. - **Development.** With a development API key, content rendered in a non-default locale is translated on demand through the General Translation API and cached in memory, so you can preview locales as you edit. This delay does not exist in production. *Note: a production API key (prefixed `gtx-api-`) makes `gt-next` behave as in production even during local development, disabling on-demand hot reloading.*