How to Translate a React Website (i18next or No-Code)

Summarize this post with: 7 min read

You can translate a React website in two ways. The code route is an i18n library such as react-i18next: you replace hard-coded text with keys, call t('key') through the useTranslation hook, and maintain a translation file per language. The no-code route is a website translation layer: you add one script to your HTML entry file, and it translates the rendered app, including views that appear after client-side navigation. react-i18next suits teams where developers own the text and want it in the codebase. A translation layer is quicker when you need the whole site in many languages, including content from a CMS or API.

Key takeaways

react-i18next (built on i18next) is the most common React i18n setup: npm install react-i18next i18next, initialize with initReactI18next, then use const { t } = useTranslation().
An i18n library translates your strings. You still need translators, language URLs, hreflang and a plan for CMS or API content.
ConveyThis needs no code changes: paste the snippet into index.html, pick languages, and edit translations in a visual editor. It follows React Router navigation and translates newly rendered content.
Client-side-only rendering limits multilingual SEO with any method. Use server rendering (for example Next.js) or prerendering if search traffic in other languages matters.

Option 1: Translate a React app with react-i18next

The react-i18next getting-started guide shows the minimal setup.

1. Install

npm install react-i18next i18next --save

2. Configure i18next

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  en: { translation: { welcome: 'Welcome back, {{name}}', cart: 'Cart' } },
  de: { translation: { welcome: 'Willkommen zurück, {{name}}', cart: 'Warenkorb' } },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en', // active language
  fallbackLng: 'en', // used when a key is missing
  interpolation: { escapeValue: false }, // React already escapes output
});

export default i18n;

3. Import it once at the entry point

// src/main.jsx
import './i18n';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(<App />);

4. Use the hook in components

import { useTranslation } from 'react-i18next';

export function Header({ user }) {
  const { t, i18n } = useTranslation();
  return (
    <header>
      <p>{t('welcome', { name: user.firstName })}</p>
      <button onClick={() => i18n.changeLanguage('de')}>Deutsch</button>
    </header>
  );
}

As the guide puts it, “You will get the t function by using the useTranslation hook.” For larger apps, split translations into namespaces and load them on demand (for example with a backend plugin) instead of bundling every language.

What an i18n library leaves to you

Someone has to write every key in every language and update it whenever the English copy changes. Missing keys quietly fall back to the default language.
Product descriptions, blog posts and CMS content aren’t in your code, so they need their own localization process.
You build the language URLs. Put the language in the route (/de/pricing) with React Router or your framework’s routing, and keep it in sync with i18n.language. Google recommends separate URLs per language rather than switching by cookie or browser setting (Google Search Central).
You also handle hreflang and <html lang>. Each language version must list itself and all others, or Google ignores the tags (Google Search Central). Update document.documentElement.lang on language change.
Prices and dates need Intl.NumberFormat and Intl.DateTimeFormat (or i18next’s formatting).

React i18n best practices

Use descriptive keys (checkout.pay) rather than full English sentences as keys.
Never build sentences by concatenating translated fragments; use interpolation so translators can reorder words.
Use i18next’s plural handling; many languages have more than two plural forms.
Don’t put text in images or SVGs you can’t translate.
Design for longer strings and test right-to-left layouts early if you need Arabic or Hebrew.
Add a CI check that fails when a key exists in English but not in other locales.

Option 2: Translate a React site without code, with ConveyThis

If you’d rather not refactor every component, or much of your content comes from a CMS or API, ConveyThis can translate the React app as it renders.

Setup takes five steps:

Create a ConveyThis account and add your domain.
Pick the source language and target languages (210 are supported), then save.
Copy the JavaScript snippet from your dashboard. The React installation guide walks through each screen.
Paste it into your HTML entry file before the closing </head> or </body> tag: public/index.html in Create React App projects, or index.html at the project root in Vite projects.
Deploy. A language switcher appears and the site is translated automatically.

On a single-page app, the script watches the page for content added or changed after load, and follows client-side route changes (History API navigation and hash changes). When React Router renders a new view or state updates add new text, ConveyThis translates it. Your components don’t need to call anything.

You keep control of the output:

Edit any sentence in context with the visual editor.
Set glossary rules for product names and fixed terms (paid plans), and reuse approved translations with translation memory.
Exclude elements with the conveythis-no-translate class, for example usernames, code samples or prices you format yourself (how to exclude segments).
Invite reviewers for each language with team roles.

In JSX, the exclusion looks like this:

<span className="conveythis-no-translate">{user.displayName}</span>

SEO for React sites

A client-rendered React app sends an almost empty HTML shell and builds the page in the browser. Whichever translation method you use, that is the main obstacle for multilingual SEO.

If organic traffic in other languages matters, render content on the server or at build time (Next.js, or a prerendering step).
Give each language its own URL. ConveyThis supports subfolders, subdomains or a ?lang parameter, adds hreflang tags automatically, and translates titles, meta descriptions and JSON-LD. See multilingual SEO.
Verify what Google sees with Search Console’s URL Inspection on a translated URL.

react-i18next vs. a translation layer

	react-i18next	ConveyThis
Code changes	Every string replaced with `t()` keys	One script tag
Who translates	Your team or translators, in JSON files	Machine translation first draft, edited visually
CMS / API content	Separate process	Translated with the page
New content	Add keys to every locale	Detected and translated automatically
URLs and hreflang	You build them	Built in
Best for	App UI owned by developers	Content-heavy sites, marketing pages, many languages

Plenty of teams use both: react-i18next for the logged-in product UI, and a translation layer for the marketing site, docs and CMS content.

For background on the concepts, see our internationalization (i18n) guide. If you also work in Vue, read how to translate a Vue.js website. If your app is Angular, there’s a separate Angular integration.

FAQ

How do I translate my React website?

Use an i18n library like react-i18next (replace text with t() keys and maintain a file per language), or add a translation script such as ConveyThis to index.html to translate the rendered app without code changes.

What is the best translation library for React?

react-i18next is the most widely used option and works with hooks via useTranslation. Other libraries exist, but the concepts (keys, locale files, interpolation, plurals) are the same.

Does ConveyThis work with React Router and dynamic content?

Yes. The script tracks client-side route changes and watches for newly rendered content, so new views and updated text are translated.

Is Google Translate a good way to translate a React site?

Browser translation helps individual visitors but creates no indexable pages and gives you no control over quality. Google’s own website widget has been limited to non-commercial use since 2020.

How do I keep some React components untranslated?

With ConveyThis, add className="conveythis-no-translate" to the element. With react-i18next, don’t pass that text through t().

To try it on your React app, create a ConveyThis account and paste the snippet into your index.html.