Frontend Internationalization Best Practices

Internationalization Best Practices

Guidelines for building a React Router i18n setup with remix-i18next. Focuses on middleware detection, locale storage, type safety, and client/server synchronization.

When to Apply

• Adding i18n to a React Router app
• Wiring remix-i18next middleware
• Implementing language switching or locale detection
• Serving locale resources from /api/locales

Rules Summary

Setup & Middleware (CRITICAL)

setup-middleware - @rules/setup-middleware.md

Configure createI18nextMiddleware and type-safe resources.

export const [i18nextMiddleware, getLocale, getInstance] =
  createI18nextMiddleware({
    detection: {
      supportedLanguages: ["es", "en"],
      fallbackLanguage: "en",
      cookie: localeCookie,
    },
    i18next: { resources },
    plugins: [initReactI18next],
  });

locales-structure - @rules/locales-structure.md

Define locale resources per language and re-export.

// app/locales/en/translation.ts
export default { title: "Example" };

Namespaces (HIGH)

namespaces-strategy - @rules/namespaces-strategy.md

Use a single namespace for small apps; multiple namespaces for large apps.