What is internationalization in a React app and why is it important?

Internationalization, often shortened to i18n, means building an app so it can easily show text in different languages for different users around the world. Instead of hardcoding English text everywhere, you store text in translation files and display the correct one based on the user's chosen language.

// en.json
{ "welcome": "Welcome to our site" }

// fr.json
{ "welcome": "Bienvenue sur notre site" }

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('welcome')}</h1>;
}