i18next

Getting Started

1. Install the skill using the command above
2. Open your AI coding agent (Claude Code, Codex, Gemini CLI, or Cursor)
3. Reference the skill in your prompt
4. The AI will use the skill's capabilities automatically

Example Prompts

• "Review the open pull requests and summarize what needs attention"
• "Generate a changelog from the last 20 commits on the main branch"

Overview

i18next is the most popular JS i18n framework. Works with React, Vue, Angular, Node.js. Features: namespace splitting, lazy loading, plurals, interpolation, context, and backend plugins for remote translations.

Instructions

Step 1: React Setup

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import HttpBackend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

i18n.use(HttpBackend).use(LanguageDetector).use(initReactI18next).init({
  fallbackLng: 'en',
  supportedLngs: ['en', 'de', 'fr', 'ja'],
  ns: ['common', 'dashboard'],
  defaultNS: 'common',
  backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
})

Step 2: Usage

import { useTranslation, Trans } from 'react-i18next'

function Dashboard() {
  const { t } = useTranslation('dashboard')
  return (
    <div>
      <h1>{t('welcome', { name: 'Alice' })}</h1>
      <p>{t('projects', { count: 5 })}</p>
      <Trans i18nKey="terms">Agree to <a href="/terms">Terms</a>.</Trans>
    </div>
  )
}

{
  "welcome": "Welcome back, {{name}}!",
  "projects_one": "You have {{count}} project",
  "projects_other": "You have {{count}} projects"
}

Guidelines

• Split translations into namespaces by feature — don't load everything.
• Use _one/_other suffixes for plurals.
• <Trans> for translations with embedded JSX.
• Language detection: browser → URL → cookie → localStorage.
• For SSR: pass language from server to avoid hydration mismatch.