# General Translation React SDKs (gt-react, gt-next): Overview
URL: https://generaltranslation.com/en-US/docs/react/overview.mdx
---

title: Overview
description: Learn about the General Translation React ecosystem, how its shared translation model works, and which quickstart to follow for your framework.

---

General Translation internationalizes the React ecosystem through one shared API. The same components, hooks, and configuration work whether you build a React single-page app, a Next.js app, a TanStack Start app, or a React Native app.

This is the landing page for the React section. Read on to understand the ecosystem and pick your framework, then follow the matching quickstart.

## The React ecosystem [#ecosystem]

Each framework has its own package, but all of them expose the same translation API:

- `gt-react` — for server-rendered React apps and single-page apps (SPAs), such as Vite or Create React App. See the [React Quickstart](/docs/react/react-quickstart) or [React SPA Quickstart](/docs/react/react-spa-quickstart).
- `gt-next` — for Next.js App Router and Pages Router apps. See the [Next.js App Router Quickstart](/docs/react/nextjs-quickstart) or [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart).
- `gt-tanstack-start` — for TanStack Start apps. See the [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart).
- `gt-react-native` — for React Native apps, including Expo and the bare React Native CLI. See the [React Native Quickstart](/docs/react/react-native-quickstart).

*Note:* `gt-tanstack-start` *and* `gt-react-native` *are experimental and not yet recommended for production.*

## Shared translation model [#shared-model]

Because every package is built on the same core, you learn the model once and reuse it everywhere. The pieces are:

- **The** [`<T>`](/docs/react/reference/components/t) **component.** Wrap any JSX in `<T>` to translate it in place, including nested elements and formatting. `<T>` translates its contents as a single unit.
- **The** [`useGT`](/docs/react/reference/hooks/use-gt) **hook.** Translate standalone strings — placeholders, `aria-label` values, alt text — with the function it returns. Call it as `const gt = useGT();`, then `gt('Hello, world!')`. In async App Router components, use [`getGT`](/docs/react/nextjs/reference/functions/get-gt) from `gt-next/server`.
- **The** `GTProvider` **component.** Wrap your app so components can access translations and the active locale. How you supply translations to it differs slightly per framework, which is why each has its own quickstart.
- `gt.config.json`**.** A single config file at your project root that declares your `defaultLocale`, your target `locales`, and where translation files are written.
- **The** `gt` **CLI.** The `gt` package generates and downloads translations. Run `npx gt translate` to translate your project through the General Translation API.

Variable components ([`<Var>`](/docs/react/reference/components/var), [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency), [`<DateTime>`](/docs/react/reference/components/datetime)), the [`<Plural>`](/docs/react/reference/components/plural) and [`<Branch>`](/docs/react/reference/components/branch) components, and the locale hooks are shared across all frameworks too.

## Choose your framework [#frameworks]

Each setup uses the same translation components and CLI, but initialization and translation delivery differ. Start with the quickstart for your framework:

- **Building a server-rendered React app:** initialize `gt-react`, load translations on the server, and hydrate `GTProvider`. See the [React Quickstart](/docs/react/react-quickstart).
- **Building a React SPA (Vite, Create React App):** initialize `gt-react` in the browser before rendering. See the [React SPA Quickstart](/docs/react/react-spa-quickstart).
- **Building a Next.js App Router app:** add the `withGTConfig` plugin and use `<T>` in server and client components. See the [Next.js App Router Quickstart](/docs/react/nextjs-quickstart).
- **Building a Next.js Pages Router app:** load the locale and translations through page props. See the [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart).
- **Building a TanStack Start app:** initialize General Translation in the root route and hydrate `GTProvider` from a loader. See the [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart).
- **Building a React Native app:** initialize at your entry point and add the Babel plugin for polyfills. See the [React Native Quickstart](/docs/react/react-native-quickstart).

Once you are set up, the [Guides](/docs/react/guides/configuring) cover shared workflows — translating JSX and strings, formatting variables, plurals, dictionaries, and managing locales — and the [Reference](/docs/react/reference/config) documents every component, hook, function, and config option. Both apply to all frameworks, with per-framework differences shown in tabs.