React Academy · Lesson

Setting Up react-i18next

Install and configure i18next with language detection and namespace splitting.

Setting Up react-i18next is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will install and configure react-i18next with language detection and namespace splitting to add multi-language support to a React app.

Installing Dependencies

Install i18next and react-i18next. Optionally add i18next-browser-languagedetector for automatic locale detection and i18next-http-backend for loading translations over HTTP.

npm install i18next react-i18next
npm install i18next-browser-languagedetector i18next-http-backend

Creating i18n.js

Create an `i18n.js` file that initialises i18next. Call `i18n.use(...)` to add plugins and `.init({...})` with your configuration.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    resources: { en: { translation: {} }, tr: { translation: {} } },
    interpolation: { escapeValue: false },
  });

export default i18n;

Importing i18n in main.jsx

Import the i18n initialisation file BEFORE rendering the app. This ensures i18n is ready before any component calls useTranslation.

import './i18n'; // must be before App
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

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

Namespaces

Namespaces split translations into logical groups (e.g. 'common', 'auth', 'dashboard'). Each namespace is a separate JSON file, loaded on demand to reduce initial bundle size.

resources: {
  en: {
    common: { save: 'Save', cancel: 'Cancel' },
    auth: { login: 'Log in', logout: 'Log out' },
  }
}

Language Detection

The LanguageDetector plugin reads the user's preferred language from the browser (navigator.language), localStorage, or the URL query string. It sets the active language automatically on first load.

Loading Translations from Public Folder

Store translations as JSON files in `public/locales/{lang}/{ns}.json`. Configure the backend plugin to load them at runtime, so adding a new language requires no code change.

import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
});

I18nextProvider (Optional)

The I18nextProvider wraps your app to provide the i18n instance via context. With react-i18next v11+ and the initReactI18next plugin, this is optional — the hook reads the global i18n instance directly.

Checking Initialisation in Components

i18next loads translations asynchronously. Use the `ready` property from `useTranslation` or check `i18n.isInitialized` before rendering text to avoid showing translation keys.

const { t, ready } = useTranslation();
if (!ready) return null;

DevTools and Missing Key Handling

Set `saveMissing: true` in development to log missing translation keys to the console. This helps you find untranslated strings quickly.

i18n.init({ saveMissing: true,
  missingKeyHandler: (lng, ns, key) => console.warn('Missing:', key) });

Quick Check

Why must you import the i18n initialisation file before rendering your React app?

Recap

Install i18next + react-i18next, create i18n.js with plugins and init config, import it before rendering, and organise translations in namespaces. Use http-backend to load translation files at runtime.

Up Next

Next lesson: **Using the useTranslation Hook** — you will replace hardcoded strings with t() calls and organise JSON translation files.

Frequently asked questions

Is the “Setting Up react-i18next” lesson free?

Yes — the full text of “Setting Up react-i18next” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Setting Up react-i18next”?

Install and configure i18next with language detection and namespace splitting. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Setting Up react-i18next” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Setting Up react-i18next
Using the useTranslation Hook
Pluralisation & Interpolation
Language Switcher & Lazy-Loading Translations

← Back to React Academy