Skip to content
Skillv1.0.0

i18next

Internationalize JavaScript apps with i18next. Use when adding translations, handling plurals, loading locale files dynamically, or i18n for React/Vue/Node.

by terminalskills(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from terminalskills/skills (skills/i18next/SKILL.md). Install upstream with npx skills add terminalskills/skills --skill i18next. Copyright stays with the author (Apache-2.0).

i18next

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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/terminalskills-skills-i18next/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

terminalskills-skills-i18next.ocm.jsonjson
{
  "ocm": "1",
  "id": "terminalskills-skills-i18next",
  "kind": "skill",
  "name": "i18next",
  "description": "Internationalize JavaScript apps with i18next. Use when adding translations, handling plurals, loading locale files dynamically, or i18n for React/Vue/Node.",
  "publisher": "terminalskills",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "i18next",
      "i18n",
      "localization",
      "translations",
      "react-i18next",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Internationalize JavaScript apps with i18next. Use when adding translations, handling plurals, loading locale files dynamically, or i18n for React/Vue/Node."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/terminalskills/skills",
      "path": "skills/i18next/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/terminalskills/skills/blob/HEAD/skills/i18next/SKILL.md",
      "key": "terminalskills/skills/skills/i18next/SKILL.md"
    },
    "compatibility": "React, Vue, Node.js, vanilla JS",
    "license": "Apache-2.0"
  },
  "instructions": "# i18next\n\n## Overview\n\ni18next 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.\n\n## Instructions\n\n### Step 1: React Setup\n\n```typescript\nimport i18n from 'i18next'\nimport { initReactI18next } from 'react-i18next'\nimport HttpBackend from 'i18next-http-backend'\nimport LanguageDetector from 'i18next-browser-languagedetector'\n\ni18n.use(HttpBackend).use(LanguageDetector).use(initReactI18next).init({\n  fallbackLng: 'en',\n  supportedLngs: ['en', 'd",
  "cost": {
    "context_tokens": 388
  }
}

Fetch it by URL: GET /api/v1/registry/terminalskills-skills-i18next/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.

i18next - Skill - OpenSmartRoute