Simple React localization pattern

locale.ts

export const locales = ["de", "en"] as const

export type Locale = typeof locales[number]

export function useLocale(): Locale {
  const router = useRouter()
  return (router.locale as Locale) || locales[0]
}

export type LocalizedTexts<T> = Record<Locale, T>

export function useLocalizedText<T>(texts: LocalizedTexts<T>) {
  const locale = useLocale()
  return texts[locale]
}

ResetButton.tsx

export const ResetButtonExample: FC = () => {
  const T = useLocalizedText({ de, en })

  return (
    <button>{T.reset}</button>
  )
}

const de = {
  reset: "Zurücksetzen",
}

const en: typeof de = {
  reset: "Reset",
}