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.

Practice

1. What is the main purpose of internationalization (i18n) in a Remix app?

easy

A. To improve app loading speed

B. To display app text in multiple languages based on user preference

C. To add animations to the user interface

D. To secure user data with encryption

Solution

1. Step 1: Understand the goal of i18n

   Internationalization means making your app support many languages so users see text in their own language.

2. Step 2: Match purpose to options

   Only To display app text in multiple languages based on user preference talks about showing text in multiple languages, which matches i18n's goal.

3. Final Answer:

   To display app text in multiple languages based on user preference -> Option B

4. Quick Check:

   i18n = multi-language support [OK]

Hint: i18n means multi-language text display [OK]

Common Mistakes:

• Confusing i18n with performance optimization
• Thinking i18n is about security
• Assuming i18n adds UI animations

2. Which of the following is the correct way to access a translation key using Remix loader data?

easy

A. const greeting = translations.get('greeting')

B. const greeting = useTranslation('greeting')

C. const greeting = i18n.t('greeting')

D. const greeting = loaderData.translations['greeting']

Solution

1. Step 1: Recall Remix loader data usage

   Loader functions return data accessed in components via loaderData. Translations are often passed this way.

2. Step 2: Identify correct syntax for translation access

   const greeting = loaderData.translations['greeting'] uses loaderData.translations['greeting'], which is valid JavaScript to get a translation string.

3. Final Answer:

   const greeting = loaderData.translations['greeting'] -> Option D

4. Quick Check:

   Access translations via loaderData object [OK]

Hint: Use loaderData to get translations in Remix [OK]

Common Mistakes:

• Using React hooks like useTranslation inside loaders
• Calling i18n.t() without importing or context
• Trying to get translations directly without loader data

3. Given this Remix loader code snippet:

export async function loader({ request }) {
  const lang = detectLanguage(request);
  const translations = await loadTranslations(lang);
  return { translations };
}

What will loaderData.translations.greeting contain if the user's language is Spanish and the translation file has { "greeting": "Hola" }?

medium

A. "Hola"

B. "Hello"

C. undefined

D. An error will occur

Solution

1. Step 1: Understand language detection and loading

   The loader detects Spanish and loads Spanish translations, which include greeting: "Hola".

2. Step 2: Check returned translations object

   The loader returns translations with greeting key set to "Hola", so loaderData.translations.greeting is "Hola".

3. Final Answer:

   "Hola" -> Option A

4. Quick Check:

   Detected Spanish language returns "Hola" [OK]

Hint: Loader returns translations matching detected language [OK]

Common Mistakes:

• Assuming default English text is returned
• Expecting undefined if language is Spanish
• Thinking loaderData is empty or causes error

4. You wrote this Remix loader to get translations:

export async function loader({ request }) {
  const lang = detectLanguage(request);
  const translations = loadTranslations(lang);
  return { translations };
}

Why might this cause a problem when running the app?

medium

A. Because loadTranslations is missing await, so translations is a Promise

B. Because detectLanguage cannot read the request object

C. Because loader functions cannot return objects

D. Because translations should be imported, not loaded dynamically

Solution

1. Step 1: Check async function usage

   loadTranslations is async, so it returns a Promise. Missing await means translations is a Promise, not resolved data.

2. Step 2: Understand impact on returned data

   Returning a Promise instead of actual translations causes errors or unexpected behavior in components.

3. Final Answer:

   Because loadTranslations is missing await, so translations is a Promise -> Option A

4. Quick Check:

   Async calls need await in loaders [OK]

Hint: Always await async calls in loaders [OK]

Common Mistakes:

• Forgetting to await async functions
• Assuming detectLanguage fails on request
• Thinking loaders can't return objects

5. You want to support English and French in your Remix app. You have translation files:

en.json: { "welcome": "Welcome" }
fr.json: { "welcome": "Bienvenue" }

How should you structure your loader and component to show the correct welcome message based on user language?

hard

A. Load both translation files in loader and merge them; in component, always show English welcome

B. In component, detect language and load translations; in loader, return empty object

C. In loader, detect language and load translations; in component, use loaderData.translations['welcome'] to display text

D. Hardcode welcome message in component and ignore loader

Solution

1. Step 1: Use loader to detect language and load correct translations

   The loader should detect user language and load only that language's translations to send to the component.

2. Step 2: Use component to display translation from loaderData

   The component accesses loaderData.translations['welcome'] to show the correct message dynamically.

3. Final Answer:

   In loader, detect language and load translations; in component, use loaderData.translations['welcome'] to display text -> Option C

4. Quick Check:

   Loader detects language, component shows translation [OK]

Hint: Detect language in loader, display translations in component [OK]

Common Mistakes:

• Loading translations in component instead of loader
• Merging all languages and ignoring user preference
• Hardcoding text instead of using translations