i18n for SSR React (react-i18next + remix-i18next)

Overview

Add localization to a React Router 7 (or Remix) SSR app using react-i18next for runtime, remix-i18next for server-side detection, i18next-parser for key extraction, and eslint-plugin-i18next for "no untranslated strings" enforcement. Translation files are bundled at build time — no async loader on first paint.

When to use this skill

Trigger when:

• User asks to add i18n / localization / translation to a React app.
• App is React Router 7 or Remix (has entry.server.tsx, loaders, ssr: true).
• Need typed translation keys, key-extraction tooling, or lint-level enforcement against hardcoded JSX literals.

Skip when: app is a pure SPA (no SSR) — drop remix-i18next and use plain i18next-browser-languagedetector. The other patterns still apply.

Quick start