{/* Time */}
  <FormattedTime value={date} />

  {/* Relative time */}
  <FormattedRelativeTime
    value={-1}
    unit="day"
    updateIntervalInSeconds={60}
  />
</div>

); }

1. Number and Currency Formatting // number-formatter.ts export class NumberFormatter { constructor(private locale: string) {}

// Format number formatNumber(value: number, options?: Intl.NumberFormatOptions): string { return new Intl.NumberFormat(this.locale, options).format(value); }

// Currency currency(value: number, currency: string): string { return this.formatNumber(value, { style: 'currency', currency }); }

// Percentage percent(value: number): string { return this.formatNumber(value, { style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 2 }); }

// Decimal decimal(value: number, decimals: number = 2): string { return this.formatNumber(value, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }); }

// Compact notation (1.2K, 1.5M) compact(value: number): string { return this.formatNumber(value, { notation: 'compact', compactDisplay: 'short' }); } }

// Usage const enFormatter = new NumberFormatter('en-US'); const deFormatter = new NumberFormatter('de-DE'); const jaFormatter = new NumberFormatter('ja-JP');

console.log(enFormatter.currency(1234.56, 'USD')); // $1,234.56 console.log(deFormatter.currency(1234.56, 'EUR')); // 1.234,56 € console.log(jaFormatter.currency(1234.56, 'JPY')); // ¥1,235

console.log(enFormatter.percent(0.1234)); // 12.34% console.log(enFormatter.compact(1234567)); // 1.2M

1. Pluralization Rules // pluralization.ts export class PluralRules { constructor(private locale: string) {}

// Get plural category select(count: number): Intl.LDMLPluralRule { const pr = new Intl.PluralRules(this.locale); return pr.select(count); }

// Format with pluralization format(count: number, forms: Record): string { const rule = this.select(count); return forms[rule] || forms.other; } }

// Usage const enRules = new PluralRules('en');

console.log(enRules.format(0, { zero: 'No items', one: 'One item', other: '{{count}} items' }));

console.log(enRules.format(1, { one: 'One item', other: '{{count}} items' }));

// Different languages have different plural rules const arRules = new PluralRules('ar'); // Arabic has 6 plural forms const plRules = new PluralRules('pl'); // Polish has complex plural rules

ICU Message Format // Using intl-messageformat import IntlMessageFormat from 'intl-messageformat';

const message = new IntlMessageFormat( '{count, plural, =0 {No items} one {# item} other {# items}}', 'en' );

console.log(message.format({ count: 0 })); // No items console.log(message.format({ count: 1 })); // 1 item console.log(message.format({ count: 5 })); // 5 items

// With gender const genderMessage = new IntlMessageFormat( '{gender, select, male {He} female {She} other {They}} bought {count, plural, one {# item} other {# items}}', 'en' );

console.log(genderMessage.format({ gender: 'female', count: 2 })); // She bought 2 items

1. RTL (Right-to-Left) Language Support // rtl-utils.ts const RTL_LANGUAGES = ['ar', 'he', 'fa', 'ur'];

export function isRTL(locale: string): boolean { const lang = locale.split('-')[0]; return RTL_LANGUAGES.includes(lang); }

export function getDirection(locale: string): 'ltr' | 'rtl' { return isRTL(locale) ? 'rtl' : 'ltr'; }

/ styles/rtl.css / :root { --text-align-start: left; --text-align-end: right; --margin-start: margin-left; --margin-end: margin-right; --padding-start: padding-left; --padding-end: padding-right; }

[dir="rtl"] { --text-align-start: right; --text-align-end: left; --margin-start: margin-right; --margin-end: margin-left; --padding-start: padding-right; --padding-end: padding-left; }

.container { text-align: var(--text-align-start); margin-left: var(--margin-start); padding-right: var(--padding-end); }

/ Or use logical properties (modern approach) / .modern-container { text-align: start; margin-inline-start: 1rem; padding-inline-end: 2rem; }

// RTL React component import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { isRTL, getDirection } from './rtl-utils';

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

useEffect(() => { const direction = getDirection(i18n.language); document.documentElement.setAttribute('dir', direction); document.documentElement.setAttribute('lang', i18n.language); }, [i18n.language]);

return (

1. Translation Management Message Extraction // extract-messages.ts import { sync as globSync } from 'glob'; import fs from 'fs';

const TRANSLATION_PATTERN = /t('"['"])/g;

export function extractMessages(pattern: string): Set { const messages = new Set(); const files = globSync(pattern);

for (const file of files) { const content = fs.readFileSync(file, 'utf8'); let match;

while ((match = TRANSLATION_PATTERN.exec(content)) !== null) {
  messages.add(match[1]);
}

}

return messages; }

// Generate translation template export function generateTemplate(messages: Set): object { const template: Record = {};

for (const message of messages) { template[message] = message; // Default to English }

return template; }

// Usage const messages = extractMessages('src/*/.{ts,tsx}'); const template = generateTemplate(messages);

fs.writeFileSync( 'locales/en/translation.json', JSON.stringify(template, null, 2) );

Translation Status // check-translations.ts export function checkTranslationStatus( baseLocale: object, targetLocale: object ): { missing: string[]; extra: string[]; coverage: number; } { const baseKeys = new Set(Object.keys(baseLocale)); const targetKeys = new Set(Object.keys(targetLocale));

const missing = [...baseKeys].filter(key => !targetKeys.has(key)); const extra = [...targetKeys].filter(key => !baseKeys.has(key));

const coverage = (targetKeys.size / baseKeys.size) * 100;

return { missing, extra, coverage }; }

// Usage const enMessages = require('./locales/en/translation.json'); const esMessages = require('./locales/es/translation.json');

const status = checkTranslationStatus(enMessages, esMessages); console.log(Spanish translation coverage: ${status.coverage.toFixed(2)}%); console.log(Missing keys: ${status.missing.join(', ')});

1. Locale Detection // locale-detector.ts export class LocaleDetector { // Detect from browser static fromBrowser(): string { return navigator.language || navigator.languages[0] || 'en'; }

// Detect from URL static fromURL(): string | null { const params = new URLSearchParams(window.location.search); return params.get('lang') || params.get('locale'); }

// Detect from cookie static fromCookie(name: string = 'locale'): string | null { const match = document.cookie.match(new RegExp(${name}=([^;]+))); return match ? match[1] : null; }

// Detect from localStorage static fromStorage(key: string = 'locale'): string | null { return localStorage.getItem(key); }

// Detect with priority static detect(defaultLocale: string = 'en'): string { return ( this.fromURL() || this.fromStorage() || this.fromCookie() || this.fromBrowser() || defaultLocale ); }

// Save locale static save(locale: string): void { localStorage.setItem('locale', locale); document.cookie = locale=${locale}; path=/; max-age=31536000; } }

1. Server-Side i18n // Next.js i18n configuration // next.config.js module.exports = { i18n: { locales: ['en', 'es', 'fr', 'de', 'ja'], defaultLocale: 'en', localeDetection: true } };

// pages/index.tsx import { GetStaticProps } from 'next'; import { useTranslation } from 'next-i18next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export default function Home() { const { t } = useTranslation('common');

return (

export const getStaticProps: GetStaticProps = async ({ locale }) => { return { props: { ...(await serverSideTranslations(locale ?? 'en', ['common'])) } }; };

Best Practices ✅ DO Extract all user-facing strings to translation files Use ICU message format for complex messages Support pluralization correctly for each language Use locale-aware date/time/number formatting Implement RTL support for Arabic, Hebrew, etc. Provide fallback language (usually English) Use namespaces to organize translations Test with pseudo-localization (ääçćëńţś) Store locale preference (cookie, localStorage) Use professional translators for production Implement translation management workflow Support dynamic locale switching Use translation memory tools ❌ DON'T Hardcode user-facing strings in code Concatenate translated strings Assume English grammar rules apply to all languages Use generic plural forms (one/many) for all languages Forget about text expansion (German is ~30% longer) Store dates/times in locale-specific formats Use flags to represent languages (flag ≠ language) Translate technical terms without context Mix translation keys with UI strings Forget to translate alt text, titles, placeholders Assume left-to-right layout Common Patterns Pattern 1: Translation Hook export function useLocale() { const { i18n } = useTranslation();

return { locale: i18n.language, changeLocale: (lng: string) => i18n.changeLanguage(lng), t: i18n.t, formatDate: (date: Date) => new DateFormatter(i18n.language).short(date), formatNumber: (num: number) => new NumberFormatter(i18n.language).formatNumber(num), formatCurrency: (amount: number, currency: string) => new NumberFormatter(i18n.language).currency(amount, currency) }; }

Pattern 2: Language Switcher Component export function LanguageSwitcher() { const { locale, changeLocale } = useLocale();

const languages = [ { code: 'en', name: 'English', nativeName: 'English' }, { code: 'es', name: 'Spanish', nativeName: 'Español' }, { code: 'fr', name: 'French', nativeName: 'Français' }, { code: 'de', name: 'German', nativeName: 'Deutsch' } ];

return ( changeLocale(e.target.value)}> {languages.map((lang) => ( {lang.nativeName} ))} ); }

Tools & Resources i18next: Comprehensive i18n framework react-intl (Format.js): React i18n library LinguiJS: Developer-friendly i18n vue-i18n: Vue.js i18n plugin Crowdin: Translation management platform Lokalise: Localization management Phrase: Localization platform POEditor: Translation management BabelEdit: Translation editor Pseudolocalization: Testing tool