JSON Internationalization (i18n): Multi-Language Apps & Localization 2026

# JSON Internationalization (i18n): Multi-Language Apps & Localization 2026

Building applications for global audiences requires proper internationalization (i18n) and localization (l10n). This guide covers JSON-based translation systems, language detection, formatting, and production-ready patterns.

Table of Contents

i18n Fundamentals

JSON Translation File Structure

React i18n with react-i18next

Node.js Backend i18n

Dynamic Locale Loading

Number, Date & Currency Formatting

RTL (Right-to-Left) Support

Translation Management

---

i18n Fundamentals

Key Concepts

Internationalization (i18n): Designing software to support multiple languages/regions Localization (l10n): Adapting software for specific languages/regions Locale: Language + region code (e.g., en-US, es-MX, zh-CN)

Common Locale Codes

| Code | Language | Region |

|------|----------|--------|

| en-US | English | United States |

| en-GB | English | United Kingdom |

| es-ES | Spanish | Spain |

| es-MX | Spanish | Mexico |

| fr-FR | French | France |

| de-DE | German | Germany |

| zh-CN | Chinese | China (Simplified) |

| zh-TW | Chinese | Taiwan (Traditional) |

| ja-JP | Japanese | Japan |

| ar-SA | Arabic | Saudi Arabia |

---

JSON Translation File Structure

Basic Structure

// en.json
{
  "welcome": "Welcome",
  "greeting": "Hello, {{name}}!",
  "logout": "Log out"
}

// es.json
{
  "welcome": "Bienvenido",
  "greeting": "¡Hola, {{name}}!",
  "logout": "Cerrar sesión"
}

// fr.json
{
  "welcome": "Bienvenue",
  "greeting": "Bonjour, {{name}} !",
  "logout": "Se déconnecter"
}

Nested Namespaces

// en.json
{
  "common": {
    "welcome": "Welcome",
    "logout": "Log out"
  },
  "auth": {
    "login": "Log in",
    "signup": "Sign up",
    "forgotPassword": "Forgot password?"
  },
  "dashboard": {
    "title": "Dashboard",
    "stats": {
      "users": "Total Users",
      "revenue": "Revenue"
    }
  }
}

Pluralization

{
  "items": {
    "zero": "No items",
    "one": "{{count}} item",
    "other": "{{count}} items"
  },
  "notifications": {
    "zero": "No new notifications",
    "one": "1 new notification",
    "other": "{{count}} new notifications"
  }
}

Context-Based Translations

{
  "delete": {
    "button": "Delete",
    "confirmation": "Are you sure you want to delete this?",
    "success": "Successfully deleted",
    "error": "Failed to delete"
  }
}

---

React i18n with react-i18next

Installation

npm install react-i18next i18next i18next-browser-languagedetector

Configuration

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import enTranslations from './locales/en.json';
import esTranslations from './locales/es.json';
import frTranslations from './locales/fr.json';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslations },
      es: { translation: esTranslations },
      fr: { translation: frTranslations }
    },
    fallbackLng: 'en',
    debug: false,
    interpolation: {
      escapeValue: false // React already escapes
    }
  });

export default i18n;

Usage in Components

import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('common.welcome')}</h1>
      <p>{t('greeting', { name: 'Alice' })}</p>

      <select
        value={i18n.language}
        onChange={(e) => i18n.changeLanguage(e.target.value)}
      >
        <option value="en">English</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
      </select>
    </div>
  );
}

Pluralization in React

function NotificationBadge({ count }: { count: number }) {
  const { t } = useTranslation();

  return (
    <div>
      {t('notifications', { count })}
    </div>
  );
}

// count = 0: "No new notifications"
// count = 1: "1 new notification"
// count = 5: "5 new notifications"

Trans Component (with HTML)

import { Trans } from 'react-i18next';

function TermsAcceptance() {
  return (
    <p>
      <Trans i18nKey="terms.acceptance">
        By signing up, you agree to our <a href="/terms">Terms of Service</a>
      </Trans>
    </p>
  );
}

// en.json
{
  "terms": {
    "acceptance": "By signing up, you agree to our <1>Terms of Service</1>"
  }
}

Namespace Separation

// i18n.js
i18n.init({
  resources: {
    en: {
      common: enCommon,
      auth: enAuth,
      dashboard: enDashboard
    }
  },
  defaultNS: 'common',
  ns: ['common', 'auth', 'dashboard']
});

// Component
function LoginPage() {
  const { t } = useTranslation('auth');
  return <h1>{t('login')}</h1>; // No prefix needed
}

---

Node.js Backend i18n

Installation

npm install i18next i18next-fs-backend i18next-http-middleware

Express Setup

const express = require('express');
const i18next = require('i18next');
const Backend = require('i18next-fs-backend');
const middleware = require('i18next-http-middleware');

i18next
  .use(Backend)
  .use(middleware.LanguageDetector)
  .init({
    backend: {
      loadPath: './locales/{{lng}}/{{ns}}.json'
    },
    fallbackLng: 'en',
    preload: ['en', 'es', 'fr'],
    ns: ['common', 'errors'],
    defaultNS: 'common'
  });

const app = express();

app.use(middleware.handle(i18next));

app.get('/api/greeting', (req, res) => {
  res.json({
    message: req.t('greeting', { name: 'User' })
  });
});

app.get('/api/error', (req, res) => {
  res.status(404).json({
    error: req.t('errors:notFound')
  });
});

Email Templates

const nodemailer = require('nodemailer');

async function sendWelcomeEmail(user, locale = 'en') {
  const i18n = i18next.cloneInstance({ lng: locale });

  const emailHtml = 

    <h1>${i18n.t('email.welcome.title')}</h1>
    <p>${i18n.t('email.welcome.body', { name: user.name })}</p>
    <a href="${user.confirmationUrl}">
      ${i18n.t('email.welcome.button')}
    </a>
  ;

  await transporter.sendMail({
    to: user.email,
    subject: i18n.t('email.welcome.subject'),
    html: emailHtml
  });
}

---

Dynamic Locale Loading

Code Splitting (React)

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    },
    fallbackLng: 'en',
    load: 'languageOnly' // Load 'en' instead of 'en-US'
  });

Lazy Loading with Next.js

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr', 'de', 'ja', 'zh']
  }
};

// pages/[...slug].tsx
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'home']))
    }
  };
}

function HomePage() {
  const { t } = useTranslation('home');
  return <h1>{t('title')}</h1>;
}

Browser Language Detection

import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .init({
    detection: {
      order: ['querystring', 'cookie', 'localStorage', 'navigator'],
      lookupQuerystring: 'lng',
      lookupCookie: 'i18next',
      lookupLocalStorage: 'i18nextLng',
      caches: ['localStorage', 'cookie']
    }
  });

---

Number, Date & Currency Formatting

Using Intl API

const locale = 'en-US';

// Numbers
const number = 1234567.89;
console.log(new Intl.NumberFormat(locale).format(number));
// en-US: "1,234,567.89"
// de-DE: "1.234.567,89"

// Currency
const price = 99.99;
console.log(new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'USD'
}).format(price));
// en-US: "$99.99"
// ja-JP: "¥100"

// Dates
const date = new Date('2026-03-23');
console.log(new Intl.DateTimeFormat(locale, {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(date));
// en-US: "March 23, 2026"
// es-ES: "23 de marzo de 2026"

// Relative time
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // "yesterday"
console.log(rtf.format(2, 'week')); // "in 2 weeks"

Integration with i18next

{
  "price": "${{value, currency(USD)}}",
  "date": "{{date, datetime}}}",
  "users": "{{count, number}}} users"
}

i18n.init({
  interpolation: {
    format: (value, format, lng) => {
      if (format === 'currency') {
        return new Intl.NumberFormat(lng, {
          style: 'currency',
          currency: value.currency
        }).format(value.amount);
      }
      if (format === 'datetime') {
        return new Intl.DateTimeFormat(lng).format(value);
      }
      return value;
    }
  }
});

---

RTL (Right-to-Left) Support

Detecting RTL Languages

const rtlLanguages = ['ar', 'he', 'fa', 'ur'];

function isRTL(language) {
  return rtlLanguages.includes(language.split('-')[0]);
}

CSS for RTL

/ Use logical properties /
.card {
  margin-inline-start: 16px;  / margin-left for LTR, margin-right for RTL /
  padding-inline: 12px;       / padding-left and padding-right /
}

/ RTL-specific styles /
html[dir="rtl"] .icon {
  transform: scaleX(-1);
}

React RTL Setup

import { useTranslation } from 'react-i18next';
import { useEffect } from 'react';

function App() {
  const { i18n } = useTranslation();

  useEffect(() => {
    const isRTL = ['ar', 'he', 'fa'].includes(i18n.language);
    document.dir = isRTL ? 'rtl' : 'ltr';
  }, [i18n.language]);

  return <div>...</div>;
}

---

Translation Management

Translation File Organization

locales/
  en/
    common.json
    auth.json
    dashboard.json
  es/
    common.json
    auth.json
    dashboard.json
  fr/
    common.json
    auth.json
    dashboard.json

Missing Translation Handling

i18n.init({
  saveMissing: true,
  missingKeyHandler: (lng, ns, key, fallbackValue) => {
    console.warn(Missing translation: ${lng}.${ns}.${key});

    // Send to analytics or logging service
    trackMissingTranslation({ lng, ns, key });
  }
});

Translation Services Integration

// Using Locize (i18n service)
import Backend from 'i18next-locize-backend';

i18n
  .use(Backend)
  .init({
    backend: {
      projectId: 'your-project-id',
      apiKey: 'your-api-key',
      referenceLng: 'en'
    }
  });

Automated Translation Extraction

# Extract translation keys from code
npm install i18next-parser

# i18next-parser.config.js
module.exports = {
  locales: ['en', 'es', 'fr'],
  output: 'locales/$LOCALE/$NAMESPACE.json',
  input: ['src/*/.{js,jsx,ts,tsx}']
};

# Run extraction
npx i18next-parser

---

Conclusion

Build globally accessible applications with proper i18n:

Structure: Organize translations in namespaced JSON files Loading: Use lazy loading and code splitting for performance Formatting: Leverage Intl API for numbers, dates, currency RTL: Support right-to-left languages with logical CSS Management: Use translation services for collaboration

Reach global audiences with seamless localization!

Related Resources

• JSON in React
• JavaScript & JSON
• JSON in Node.js