Introduction

Welcome to the docs for General Translation.

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

Why choose General Translation?

General Translation creates the entire i18n stack, from developer libraries, to AI translations, to the infrastructure that serves your translations. Because we built the whole stack from scratch, it:

Translates 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:

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>
    )
}

Supports translated 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');
}

Works across 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>
    )
}

Supports on-demand translation

(Experimental, currently gt-next server components only.)

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.