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.

• Setup is simple, with no need for complex rewrites of your project.
• Translations ship in seconds and load in milliseconds.
• UI gets translated in context by powerful AI models.

Get started

npm i gt-next

yarn add gt-next

Example

import { T } from 'gt-next'
 
export default function MyComponent() {
    return (
        <T id="my_id">
            Hello, world!
        </T>
    )
}

Why choose General Translation?

General Translation is an entire i18n stack, from developer libraries, to AI translations, to the 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. 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.

 
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. Translate content on-demand

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

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.