Internationalization (i18n) in Remix - Step-by-Step Execution

Concept Flow - Internationalization (i18n)

User visits page

↓

Detect user language

↓

Load language resources

↓

Render UI with translations

↓

User interacts

↓

Update UI if language changes

↓

Display content in chosen language

This flow shows how Remix detects user language, loads translations, and renders the UI accordingly.

Execution Sample

Remix

import { useLoaderData } from '@remix-run/react';
import { json } from '@remix-run/node';

export async function loader({ request }) {
  const lang = request.headers.get('Accept-Language')?.split(',')[0].split('-')[0] || 'en';
  let messages;
  try {
    const mod = await import(`../locales/${lang}.json`);
    messages = mod.default;
  } catch {
    const mod = await import(`../locales/en.json`);
    messages = mod.default;
  }
  return json({ messages });
}

export default function Index() {
  const { messages } = useLoaderData();
  return <h1>{messages.title}</h1>;
}

This Remix loader detects the user's language, loads the correct translation file, and renders the title in that language.

Execution Table

Step	Action	Input/State	Output/Result
1	User visits page	Browser sends request with Accept-Language: 'fr, en;q=0.8'	Request received with headers
2	Loader reads Accept-Language header	'fr, en;q=0.8'	Extract language code 'fr'
3	Loader imports translation file	Import '../locales/fr.json'	Loaded messages object with French translations
4	Loader returns JSON response	messages object	Response contains messages for 'fr'
5	Component uses useLoaderData	Receives messages	messages available in component
6	Component renders <h1>	messages.title = 'Bonjour'	Page shows <h1>Bonjour</h1>
7	User changes browser language to 'en'	Next request Accept-Language: 'en'	Loader repeats steps with 'en' messages
8	Component renders updated title	messages.title = 'Hello'	Page shows <h1>Hello</h1>
9	No translation file found	Language 'es' requested but file missing	Fallback to default 'en' messages
10	Exit	All steps complete	Page shows content in correct language or fallback

💡 Execution stops after rendering page with correct or fallback language messages.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	Final
lang	undefined	'fr'	'fr'	'fr'	'fr'
messages	undefined	undefined	{title: 'Bonjour'}	{title: 'Bonjour'}	{title: 'Bonjour'}

Key Moments - 3 Insights

Why does the loader pick only the first language from Accept-Language header?

The loader uses split(',')[0] to get the primary language preference, ensuring it loads the most preferred translation first as shown in execution_table step 2.

What happens if the translation file for the detected language is missing?

As in execution_table step 9, the loader falls back to the default language (usually 'en') to avoid errors and still show content.

How does the component get the translation messages?

The component uses useLoaderData() to access the messages returned by the loader, as shown in execution_table step 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'lang' after step 2?

A 'fr'

B 'en'

C 'es'

D undefined

💡 Hint

Check the 'Action' and 'Output/Result' columns at step 2 in the execution_table.

At which step does the component render the translated title?

A Step 3

B Step 4

C Step 6

D Step 9

💡 Hint

Look for when the component uses messages to render UI in the execution_table.

If the translation file for 'es' is missing, what does the loader do?

A Throws an error and stops

B Falls back to default 'en' translations

C Loads 'fr' translations instead

D Returns empty messages

💡 Hint

Refer to step 9 in the execution_table about missing translation files.

Concept Snapshot

Internationalization (i18n) in Remix:
- Detect user language from request headers
- Load matching translation JSON file dynamically
- Pass translations via loader to component
- Render UI text using loaded messages
- Fallback to default language if missing
- Supports dynamic language switching

Full Transcript

This visual execution trace shows how Remix handles internationalization by detecting the user's preferred language from the Accept-Language header, loading the corresponding translation file, and rendering the UI with translated text. The loader function extracts the language code, imports the correct JSON file with messages, and passes them to the component via useLoaderData. The component then renders text like the page title in the chosen language. If a translation file is missing, Remix falls back to a default language to keep the app working. This process repeats on each request, allowing dynamic language support.