🌍 Initializing i18n in a Rails + React Project

🎯 Goal

Add internationalization (i18n) support to a Rails project that uses React for frontend, placed under app/javascript/.

This enables the application to support multiple languages (starting with English) using i18next and react-i18next libraries.

🧱 Folder Structure

app/javascript/
├── packs/
│   └── application.js
├── src/
│   ├── common/
│   │   └── i18n.js
│   ├── translations/
│   │   └── en.json
│   └── App.js

📦 Step 1: Install Dependencies

yarn add [email protected] [email protected]

📁 Step 2: Create i18n Config

Create app/javascript/src/common/i18n.js:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "../translations/en.json";

i18n.use(initReactI18next).init({
  resources: { en: { translation: en } },
  fallbackLng: "en",
});

export default i18n;

📝 Step 3: Create Translation JSON

Create app/javascript/src/translations/en.json:

{
  "title": "Blog-it"
}

This file will contain all English translation strings.