GTGeneral Translation, Inc.

Language infrastructure for developers

Internationalize your with a few lines of code.


shell

Copy

npm i @generaltranslation/react

3 lines of code, 30+ languages

How to use @generaltranslation/react to translate your Next.js app

21st May 2024


Engineers shouldn't have to focus on internationalization. It's time-consuming, difficult, and usually unrelated to the core function of whatever you're building. Traditional internationalization ("i18n") solutions use human translators, take days to update every time you push a change, and cost thousands of dollars to use.

General Translation is different. We're building internationalization for people who move fast and break things. This means:

  • You shouldn't have to change your code significantly to serve global users or display your website in a non-English language.
  • Internationalization should happen as fast as you push. Ideally, faster.
  • Internationalization should be pay-as-you-go, not a fixed, high cost.

This blog post describes our @generaltranslation/react library for internationalizing React apps. Install by opening your terminal and typing:


shell

Copy

npm i @generaltranslation/react

The <I18N> tag is a React Server Component. Just wrap any component you need translated with an <I18N> tag. You should use different <I18N> tags according to your framework. In Next.js use <NextI18N>, which automatically sets the user's language based on their request headers:


javascript

Copy

import { NextI18N as I18N } from '@generaltranslation/react'

export default function Example() {
	return (
		<I18N>
			<p>This is an example.</p>
		</I18N>
	)
};

Just like that, the paragraph tag <p>This is an example</p> will appear in whatever language your user's browser requests. 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.

There are a few moving parts here, so I'll explain each individually.


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 the following variables to your environment.


.env

Copy

GT_API_KEY=""
GT_PROJECT_ID=""

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.


<I18N>

<I18N> tags can be wrapped around strings or components, or collections of components. Requests for translation are batched, so adding many I18N tags will not degrade performance. For example, the following would be valid:


javascript

Copy

import { NextI18N as I18N } from '@generaltranslation/react'

export default function Example() {
	return (
		<main>
			<I18N><h1>Welcome to our site!</h1></I18N>
			<I18N><p>Consider trying our product.</p></I18N>
			<I18N><p>This is an example.</p></I18N>
		</main>
	)
};

And this would also be valid:


javascript

Copy

import { NextI18N as I18N } from '@generaltranslation/react'

export default function Example() {
	return (
		<I18N>
			<main>
				<h1>Welcome to our site!</h1>
				<p>Consider trying our product.</p>
				<p>This is an example.</p>
			</main>
		</I18N>
	)
};

Try us out!

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 and Fernando at founders@generaltranslation.com.

Full documentation coming soon.