i18n in Expo (React Native) and Next.js with one shared dictionary and a fallback language

// shared/i18n/messages.ts
export const LOCALES = ['en', 'es', 'fr', 'de', 'pt', 'ru'] as const;
export type Locale = (typeof LOCALES)[number];
export const FALLBACK: Locale = 'en';

export function isLocale(value: string | null | undefined): value is Locale {
  return !!value && (LOCALES as readonly string[]).includes(value);
}

type Dict = Record<string, string>;

export const messages: Record<Locale, Dict> = {
  en: { 'home.title': 'Today', 'home.greeting': 'Hi, {name}!', 'streak.one': '{count} day', 'streak.other': '{count} days' },
  es: { 'home.title': 'Hoy', 'home.greeting': '¡Hola, {name}!' },
  fr: { 'home.title': "Aujourd'hui", 'home.greeting': '' },
  de: {},
  pt: { 'home.title': 'Hoje' },
  ru: { 'home.title': 'Сегодня', 'streak.one': '{count} день', 'streak.few': '{count} дня', 'streak.many': '{count} дней', 'streak.other': '{count} дня' },
};

// shared/i18n/t.ts
import { messages, FALLBACK, type Locale } from './messages';

export function lookup(locale: Locale, key: string): string | undefined {
  const value = messages[locale][key];
  return value ? value : undefined; // '' counts as missing
}

export function translate(
  locale: Locale,
  key: string,
  params?: Record<string, string | number>,
): string {
  const template = lookup(locale, key) ?? lookup(FALLBACK, key) ?? key;
  return template.replace(/\{(\w+)\}/g, (_, k) =>
    params && k in params ? String(params[k]) : `{${k}}`,
  );
}

translate('fr', 'home.greeting', { name: 'Ana' }); // "Hi, Ana!" (French entry is empty)
translate('es', 'home.subtitle');                  // "home.subtitle" (missing everywhere)

import { lookup, translate } from './t';

export function plural(locale: Locale, baseKey: string, count: number) {
  const category = new Intl.PluralRules(locale).select(count); // 'one' | 'few' | 'many' | 'other' ...
  const key = `${baseKey}.${category}`;
  const hasKey = lookup(locale, key) ?? lookup(FALLBACK, key);
  return translate(locale, hasKey ? key : `${baseKey}.other`, { count });
}

plural('ru', 'streak', 3);  // "3 дня"
plural('ru', 'streak', 21); // "21 день"
plural('en', 'streak', 3);  // "3 days"

// app/i18n/LanguageProvider.tsx
import { getLocales } from 'expo-localization';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createContext, useContext, useEffect, useRef, useState } from 'react';
import { FALLBACK, isLocale, type Locale } from '@/shared/i18n/messages';
import { translate } from '@/shared/i18n/t';

const KEY = 'app.language';

function deviceLocale(): Locale {
  for (const l of getLocales()) {
    if (isLocale(l.languageCode)) return l.languageCode;
  }
  return FALLBACK;
}

type I18n = {
  locale: Locale;
  setLocale: (l: Locale) => void;
  t: (key: string, params?: Record<string, string | number>) => string;
};

const Ctx = createContext<I18n | null>(null);

export function LanguageProvider({ children }: { children: React.ReactNode }) {
  const [locale, setLocaleState] = useState<Locale>(deviceLocale);
  const userChose = useRef(false);

  useEffect(() => {
    AsyncStorage.getItem(KEY).then((saved) => {
      if (!userChose.current && isLocale(saved)) setLocaleState(saved);
    });
  }, []);

  const setLocale = (l: Locale) => {
    userChose.current = true; // an explicit choice beats anything loaded later
    setLocaleState(l);
    AsyncStorage.setItem(KEY, l);
  };

  const t = (key: string, params?: Record<string, string | number>) => translate(locale, key, params);

  return <Ctx.Provider value={{ locale, setLocale, t }}>{children}</Ctx.Provider>;
}

export const useI18n = () => {
  const ctx = useContext(Ctx);
  if (!ctx) throw new Error('useI18n must be used inside LanguageProvider');
  return ctx;
};

app/
  [lang]/
    layout.tsx
    page.tsx
middleware.ts

// middleware.ts (Next.js 16 renames this file to proxy.ts and the export to `proxy`)
import { NextResponse, type NextRequest } from 'next/server';
import { LOCALES, FALLBACK, isLocale } from '@/shared/i18n/messages';

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  if (LOCALES.some((l) => pathname === `/${l}` || pathname.startsWith(`/${l}/`))) return;

  const header = request.headers.get('accept-language') ?? '';
  const preferred = header.split(',').map((p) => p.split(';')[0].trim().toLowerCase().slice(0, 2));
  const locale = preferred.find(isLocale) ?? FALLBACK;

  request.nextUrl.pathname = `/${locale}${pathname}`;
  return NextResponse.redirect(request.nextUrl);
}

export const config = { matcher: ['/((?!api|_next|.*\\..*).*)'] };

// app/[lang]/layout.tsx
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { LOCALES, FALLBACK, isLocale } from '@/shared/i18n/messages';
import { translate } from '@/shared/i18n/t';

export function generateStaticParams() {
  return LOCALES.map((lang) => ({ lang }));
}

export async function generateMetadata(
  { params }: { params: Promise<{ lang: string }> },
): Promise<Metadata> {
  const { lang } = await params;
  const locale = isLocale(lang) ? lang : FALLBACK;
  return {
    metadataBase: new URL('https://example.com'),
    title: translate(locale, 'home.title'),
    alternates: {
      canonical: `/${locale}`,
      languages: {
        ...Object.fromEntries(LOCALES.map((l) => [l, `/${l}`])),
        'x-default': `/${FALLBACK}`,
      },
    },
  };
}

export default async function Layout(
  { children, params }: { children: React.ReactNode; params: Promise<{ lang: string }> },
) {
  const { lang } = await params;
  if (!isLocale(lang)) notFound();
  return (
    <html lang={lang}>
      <body>{children}</body>
    </html>
  );
}

// scripts/check-messages.ts (run with: npx tsx scripts/check-messages.ts)
import { messages, LOCALES, FALLBACK } from '../shared/i18n/messages';

const PLURAL = /\.(zero|one|two|few|many|other)$/;
const base = (key: string) => key.replace(PLURAL, '');
const required = new Set(Object.keys(messages[FALLBACK]).map(base));
let failed = false;

for (const locale of LOCALES) {
  if (locale === FALLBACK) continue;
  const have = new Set(
    Object.entries(messages[locale]).filter(([, v]) => v !== '').map(([k]) => base(k)),
  );
  const missing = [...required].filter((k) => !have.has(k));
  if (missing.length) {
    failed = true;
    console.error(`${locale}: ${missing.join(', ')}`);
  }
}
process.exit(failed ? 1 : 0);