Internationalization (i18n) in Remix

Introduction

Internationalization helps your app speak many languages. It makes your app friendly to users worldwide by showing text in their language.

You want your website to support English and Spanish users.

Your app needs to show dates and numbers in local formats.

You want to add a language switcher for visitors from different countries.

You plan to expand your app to new countries with different languages.

Syntax

Remix

import { useLoaderData } from '@remix-run/react';
import { json } from '@remix-run/node';
import { i18n } from '~/i18n.server';

export const loader = async ({ request }) => {
  const locale = await i18n.getLocale(request);
  const welcome = await i18n.getMessage(locale, 'welcome');
  return json({ welcome });
};

export default function Index() {
  const { welcome } = useLoaderData();
  return <div>{welcome}</div>;
}

Use i18n.getLocale(request) to detect user language from the request.

Use i18n.getMessage(locale, key) to get translated text for the given language.

Examples

Gets the English translation for the key 'hello'.

Remix

const message = await i18n.getMessage('en', 'hello');
console.log(message);

Detects user language from request and gets the greeting message in that language.

Remix

const locale = await i18n.getLocale(request);
const greeting = await i18n.getMessage(locale, 'greeting');

Loader function to pass the detected locale to the component.

Remix

export const loader = async ({ request }) => {
  const locale = await i18n.getLocale(request);
  return json({ locale });
};

Sample Program

This Remix component detects the user's language and shows a welcome message and intro text in that language.

Remix

import { useLoaderData } from '@remix-run/react';
import { json } from '@remix-run/node';
import { i18n } from '~/i18n.server';

export const loader = async ({ request }) => {
  const locale = await i18n.getLocale(request);
  return json({
    welcome: await i18n.getMessage(locale, 'welcome'),
    intro: await i18n.getMessage(locale, 'intro')
  });
};

export default function Welcome() {
  const { welcome, intro } = useLoaderData();
  return (
    <main>
      <h1>{welcome}</h1>
      <p>{intro}</p>
    </main>
  );
}

Important Notes

Always provide fallback messages in a default language.

Remember to keep your translation keys consistent and clear.

Test your app by changing browser language settings to see translations.

Summary

Internationalization lets your app show text in many languages.

Use Remix loaders to detect user language from requests.

Use translation keys to get the right text for each language.