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.

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

'use client'
 
// client component
// should be used inside <GTProvider>
 
import { useState } from 'react';
import { T, Var } from 'gt-next;
 
export default function Page() {
 
    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 { getGT } from 'gt-next;
 
// translates <p>Hello, world</p>
export default function Page() {
    const t = getGT();
    return t('hello');
}

4. Translate content on-demand

Sometimes, your app needs a translation which doesn't already exist.

This can happen if:

• You've enabled the language a user requests, but never created translations for it before.
• You've changed some translated content in your project without requesting a new translation for it.

In this situation, gt-next can create a translation for you on demand, during runtime. This translation will be streamed via your server to your user within a few seconds.

Most projects should use the CLI tool to create translations in advance, rather than relying on on-demand translations.