Introduction

General Translation

Welcome to the docs for General Translation (opens in a new tab).

We publish internationalization ("i18n") libraries for React (opens in a new tab) and Next.js (opens in a new tab) apps.

React

npm i gt-react

Next.js

npm i gt-next

Unlike other i18n stacks, gt-react:

  • Translates entire React components, not just strings. So there's no need to rewrite your site to accomodate new languages. You can write dictionaries in full JSX or use inline wrappers like <T>.

Additionally, gt-next:

  • Translates automatically — once connected to our cloud service, your app will instantly support dozens of languages, no extra work needed.
  • Works across both client and server components, with first-class support for Next.js App Router and React Server Components.
💡

These docs are under construction. Please email archie@generaltranslation.com if what you're looking for isn't here.

How does it work?

Here's how gt-next works when the default language of your app (defaultLocale) is English (en-US):

  • For English-speaking users, nothing changes. No request is ever made to the translation CDN and your site is rendered as normal.

  • When a non-English language user visits your site, the library checks our CDN. The CDN is global and fast — typical response time is double digit milliseconds.

  • If a cached translation exists, the library reconciles it with the original structure of the page (handling things like plurals and variables) and displays the translated site.

  • By default, the server fetches translations and then either renders them with SSR (opens in a new tab) or provides them to the client with <GTProvider>. Entirely client-side Next.js apps should use gt-react.

  • You can use the CLI to update your remote dictionary automatically, e.g. whenever you push to a remote Git repo. Translations are usually available in less than a minute.

What happens if a translation doesn't exist?

This can happen if:

  • You never created a remote dictionary for the language your user is requesting.
  • You've changed an item in your local (default language) dictionary without updating your remote one.
  • A translation is not ready yet.

If no cached translation exists, we'll perform a translation on-demand. This translation will be streamed via your server to your user within a few seconds.

What this looks like: the rest of the page loads, with your translated component loading in a few seconds later. The second time a user visits your page, the new translation will be cached, so it should load like any other component.

Next.js