name	i18n
description	Internationalization with i18next and react-i18next. Covers translation setup, namespaces, pluralization, and language detection. Triggers on i18n, i18next, translation, t().
triggers	i18n, i18next, translation, t\(, useTranslation, Trans

Implement internationalization using i18next with React. Handle translations, pluralization, interpolation, and language switching. **CRITICAL: Fetch i18next documentation before implementing.**

MCPSearch({ query: "select:mcp__plugin_devtools_context7__query-docs" })

// i18next configuration
mcp__context7__query_docs({
  libraryId: "/i18next/i18next",
  query: "How do I configure init with configuration and namespaces?",
});

// React integration
mcp__context7__query_docs({
  libraryId: "/i18next/react-i18next",
  query: "How do I use useTranslation and the Trans component?",
});

// Pluralization and interpolation
mcp__context7__query_docs({
  libraryId: "/i18next/i18next",
  query: "How do I handle plural, interpolation, and context?",
});

Note: Context7 v2 uses server-side filtering. Use descriptive natural language queries.

**i18n configuration:**

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: enTranslations },
    de: { translation: deTranslations },
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false, // React already escapes
  },
});

export default i18n;

Usage in components:

import { useTranslation } from "react-i18next";

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("items", { count: 5 })}</p>
      <p>{t("greeting", { name: "John" })}</p>
    </div>
  );
}

Translation file structure:

{
  "welcome": "Welcome",
  "items_one": "{{count}} item",
  "items_other": "{{count}} items",
  "greeting": "Hello, {{name}}!"
}

**Namespaces:**

// Separate by feature
const { t } = useTranslation("dashboard");
t("title"); // dashboard:title

// Multiple namespaces
const { t } = useTranslation(["common", "dashboard"]);
t("common:button.save");

Pluralization:

{
  "item_zero": "No items",
  "item_one": "One item",
  "item_other": "{{count}} items"
}

Interpolation:

{
  "greeting": "Hello, {{name}}!",
  "date": "Today is {{date, datetime}}"
}

Context:

{
  "friend_male": "He is a friend",
  "friend_female": "She is a friend"
}

t("friend", { context: "male" });

Trans component (for JSX):

import { Trans } from "react-i18next";

<Trans i18nKey="description">
  Welcome to <strong>our app</strong>. Click <a href="/start">here</a> to begin.
</Trans>;

src/
├── i18n/
│   ├── index.ts          # i18n configuration
│   ├── locales/
│   │   ├── en/
│   │   │   ├── common.json
│   │   │   └── dashboard.json
│   │   └── de/
│   │       ├── common.json
│   │       └── dashboard.json

**Required:** - Set `escapeValue: false` for React - Use namespaces for large apps - Provide fallback language - Extract strings from code (no inline text)

Naming:

Keys: snake_case or dot.notation
Files: <namespace>.json
Namespaces: common, dashboard, settings, etc.

Context7 docs fetched for current API
i18n configured with fallback
Translations organized by namespace
Pluralization works correctly
No hardcoded strings in components

i18n

Install Skill

SKILL.md