Introduction

Welcome to the docs for General Translation! (GT)

We publish developer libraries for React and Next.js apps which automate your entire internationalization (i18n) stack.

Getting started

Follow our quickstart guides:

• Setup is simple and can be done in minutes.
• There is no need for complex rewrites of your application.
• UI and HTML elements are translated in context by powerful AI models.
• Translations occur both on-demand and in CI/CD.
• Translations ship in seconds and load in milliseconds.

Why choose General Translation?

General Translation is an entire i18n stack, including developer libraries, AI translations, and the entire infrastructure that serves translated content. With GT libraries like gt-react and gt-next, you can:

1. Translate entire React components, not just strings

UI passed as the children of the <T> component will be translated regardless of how complicated the JSX tree is. For example:

import { T } from "gt-next";
import CustomButton from "./CustomButton";
 
export default function Page() {
  const myFunction = () => {
    console.log("myValue");
  };
 
  return (
    <T id="my_id">
      <p>You can write any JSX as children of the {"<T>"} component.</p>
      <p>
        For example, you could write a <a href="/">link</a> and have the text be
        translated in context.
      </p>
      <CustomButton onClick={myFunction}>
        Or you could translate the children of a complex component like this
        one!
      </CustomButton>
    </T>
  );
}

2. Translate both client and server components

With first class support for the Next.js App Router and React Server Components, you can translate both client and server components.

import getName from "@/getName";
import { T, Var } from "gt-next";
 
export default async function MyServerComponent() {
  const name = await getName();
 
  return (
    <T id="greeting">
      Hello, <Var value={name} />
    </T>
  );
}

"use client";
// this should be used inside <GTProvider>
 
import { useState } from "react";
import { T, Var } from "gt-next";
 
export default function MyClientComponent() {
  const [name, setName] = useState("Alice");
 
  return (
    <T id="greeting">
      Hello, <Var value={name} />
    </T>
  );
}

3. Write content inline or in dictionaries

JSX content placed inside a <T> component is marked for translation:

// inline translation
 
import { T } from 'gt-next;
 
// translates <p>Hello, world</p>
export default function Page() {
  return (
    <T id='hello'>
      <p>Hello, world!</p>
    </T>
  )
}

Many projects have a central dictionary in which they store all translatable content. Uniquely, General Translation libraries let you write dictionaries as objects containing JSX:

// dictionary translation
 
import { useElement } from 'gt-next;
 
// translates <p>Hello, world</p>
export default function Page() {
  const t = useElement();
  return t('hello');
}

4. View translated content in development

No need to worry about how UI looks in different languages, General Translation will automatically translate your content as you write it in real-time.

Instead of having to continuously revise your UI multiple times in production, simply write your content in English once and let General Translation handle the rest.

Need to see how your UI elements look in German before deploying? No problem, General Translation will automatically translate them for you!

5. Translate content on-demand

No need to guess which languages your users will need. General Translation can create translations on-demand, during runtime in production.

This can happen if:

• A requested language has never been seen before
• Some cases where the content of a component cannot be known until render time

In this situation, gt-next and gt-react can create a translation for you on demand, while your app is running. Once the translation is loaded, it will rewrite your component in real time with the new translation content.

Get started

npm i gt-next

Ready to go global? Start translating your app in minutes and reach users worldwide!