Internacionalization setup for React with i18n and date-fns

dateFns.ts

import * as dateFnsLocales from 'date-fns/locale';
import { Locale } from 'date-fns';

import i18n from './i18n';

interface Locales {
  [key: string]: Locale;
}

const getDateFnsLocale = (): Locale => {
  const locales: Locales = {
    pt: dateFnsLocales.ptBR,
    en: dateFnsLocales.enUS,
    de: dateFnsLocales.de,
  };

  return locales[i18n.language];
};

export default getDateFnsLocale;

example-of-translation-file.ts

{
  "account_form": {
    "email": "E-mail",
    "password": "Password",
    "full_name": "Nome completo",
    "forgot_my_password": "Esqueci minha senha"
  },
  "signin": {
    "welcome_to_the_platform": "Bem vindo a plataforma",
    "create_an_account": "Cria uma conta"
  },
  "signup": {
    "create_an_account": "Cria uma conta",
    "already_have_an_account": "Já possui uma conta? Faça seu login"
  },
  "buttons": {
    "confirm": "Confirm"
  }
}

i18n.ts

import i18n from 'i18next';
import detector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

import translationEN from './en/common.json';
import translationPT from './pt/common.json';

const resources = {
  en: {
    translation: translationEN,
  },
  pt: {
    translation: translationPT,
  },
};

i18n
  .use(detector)
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;