GT, Inc.General Translation, Inc.

Launch in every language

Automatic internationalization in two lines of code

Internationalization in five minutes

How to use gt-react to translate your Next.js app

9th June 2024

Engineers shouldn't have to focus on internationalization. It's boring, difficult, and a distraction from what you're really building.

General Translation is internationalization for people who move fast and break things.

The problem

Most React internationalization ("i18n") solutions force you to rewrite your site to accomodate them. Usually, this involves having variables instead of text, then switching them out based on your vistor's browser language.

Then, you have to decide whether to use human or machine translators.

Professional human translators cost thousands of dollars and take days, with a different translator for every language. Whenever you make a tiny change to your site, you have to run that slow, costly process again, for every language. It's no wonder many startups just don't bother.

Machine translators are even worse. They either get the context completely wrong, or destroy the structure of your site.

Consider the following paragraph tag:

Here's what any i18n solution has to get right:

  • The word "Focus" has to be translated in context — as a verb, not a noun.
  • The <i> tag has to be preserved around the translation of the word "Focus", with any class names or other props intact.
  • The word "example" has to be translated in context — e.g. in languages that care about whether it is a subject or an object.
  • The period after <b>example</b> has to remain.
  • All the children of the <p> tag have to be re-ordered based on the sentence structure of the target language.

Even a human translator can struggle with this. After all, there's no guarantee that the <p> tag will even have the same number of children after translation is done.

The solution

Installation is fast and simple.

You'll also need some environment variables:

Here's how it works when your default language is English:

  • For English-speaking users, nothing changes. No data is ever sent to us and your site is rendered as normal.
  • The first time a non-English language user visits your site, we use a cloud-based AI model to translate your content into their preferred browser language.
  • Initially, an English version of your page is then served to the user, so that there's no noticeable latency. When the translated content is ready, usually within a few seconds, it replaces the English content on the page.
  • We then save your translated content to serve to subsequent non-English-speaking users, who only ever receive the page in their chosen language. Data is cached globally, and usually available in fewer than 100ms.
  • Whenever you update your website, the library notices the new, uncached content. Translated content that is still valid is served, alongside the new content in English. Just like when the entire page needed to be translated, the new content replaces the English as soon as it's ready, and is cached for the next user.

The <I18N> tag is a React Server Component. Just wrap any component you need translated with an <I18N> tag. In Next.js import from gt-react/next to automatically set the user's language based on their request headers.

API Keys

To use the General Translation service, you'll need an API key. The library reads automatically from process.env, so all you need to do is add GT_API_KEY to your code.

You can create a new API key on the Dashboard. New users are given a small, free allowance to test out the service. Project IDs can also be found on the Dashboard. They are used to quickly retrieve content from the cache.

Try us out!

The service is currently live, but in beta. We don't recommend using it for any of your production projects as of today, June 9th. (This blog post will be updated when that changes.)

If you're building a startup or project and want to offer it in multiple languages, we want to hear from you! Just email Archie at

Full documentation coming soon.