AI Translation for React and Next.js Apps

Getting Started

Interested in AI translation for React and Next.js apps? You've found the right place. Let's learn how we can implement internationalization (i18n) with the help of AI!

i18nexus provides the AI translation capabilities we need to help achieve precise and contextually accurate translations. It's designed to integrate seamlessly with libraries such as i18next and next-intl.

If you haven’t used i18nexus before, you can easily do so by signing up for free and following our Next.js integration tutorial or our React integration tutorial.

Automated AI Translation

Let’s walk through how to add a string to your i18nexus project. Once added, it will be automatically translated by our AI translator. 🤖

In this example, my project supports German and Spanish. Any string I add will be instantly translated into those languages.

AI translation is especially powerful compared to traditional machine translation tools like Google Translate when a phrase has multiple possible meanings.

For example, let's say we have the word "Save!" in a marketing banner on our website's pricing page. I'm going to add "Save!" as the value:

i18nexus automatically translates our value using OpenAI:

Uh oh! 🤦‍♂️ OpenAI assumed “Save!” meant “save a file,” but we meant “save money”. But we don't need to be bilingual to be able know these translations are incorrect...

Notice the little purple notification icon on the AI Note button? That means the AI translator is asking for clarification.

Let's give our AI translator more context!

The translations are automatically updated. This time, with the correct meaning based on our note:

Awesome! ⚡️

You can toggle AI translation suggestions feature anytime in your project settings:

In our project settings we also have the ability to add project-level context about our company or website:

The ability to give context to machine translations is a huge step forward in this industry... and it’s all thanks to AI!

When to Use AI Translation

Machine translation tools like Google Translate and DeepL are a great starting point, but as we've seen, some phrases need more context to be translated accurately.

Here are a few examples of when to use the AI translation:

Ambiguous Phrases

Just like in our "Save!" example above, phrases with multiple meanings can be challenging for standard machine translators. By providing context, you can ensure that the AI selects the appropriate translation.

Machine translators like Google Translate and DeepL will most likely just select the most commonly used definition, but using AI we can instruct the translator about which definition we are referring to.

Technical Terms

Technical jargon or industry-specific terminology often requires precise translation. Using the project-level AI Instructions feature, you can specify your industry to get more accurate results.

Tone and Style

Ensuring the correct tone and style is crucial, especially for marketing content or user interfaces. Adding instructions, such as "formal tone" or "friendly and casual", helps maintain consistency across all translations.

Length

Sometimes, the length of the translation is important, especially for UI elements or messages with character limits. Using AI, you can specify the desired length to ensure the translation fits perfectly.

Does AI Replace Human Translators?

No machine translator is perfect, including AI. It is always recommended to hire professional translators to review and verify all machine translations.

When you get to the point of hiring translators, you can simply invite them to your i18nexus project where they will see an intuitive Translator interface for editing and confirming translations:

No more emailing your JSON files around 🙂

Is OpenAI a Better Translator than Google and DeepL?

There isn't a one-size-fits-all answer. For many everyday translation tasks, Google Translate and DeepL might be more suitable. However, for more nuanced or context-specific translations, especially where interaction and clarification are beneficial, OpenAI can be a better choice.

When researching this topic you will find a lot of mixed opinions. It is likely fair to say that each service's quality and accuracy varies language to language.

To Sum It Up

i18nexus’s AI translation feature provides a powerful solution for achieving more accurate and contextually appropriate translations of your app’s content. Whether dealing with ambiguous phrases, technical terms, varying tones, or specific lengths, the AI translation tool helps you maintain higher quality translations across all languages.

Happy coding! 🌎