Intermediate5 min readShare
Was this chapter helpful?
Share
Make your app speak every language. Learn how to add multi-language support so users worldwide can use your app in their native tongue.
i18n stands for “internationalization” (the “18” is the number of letters between the “i” and the “n”). It means building your app so it can be easily translated into different languages and adapted for different regions.
Instead of hardcoding text like “Welcome back” directly in your components, you use translation keys that map to different languages. The app then shows the right text based on the user’s language preference.
A language + region code like en-US (English, United States) or es-MX (Spanish, Mexico). Determines which translations to show.
JSON or YAML files that hold all the text for each language. One file per language, organized by page or feature.
A dropdown or button that lets users pick their preferred language. Often shown in the header or footer.
Right-to-left layout for languages like Arabic and Hebrew. Text, icons, and layouts need to mirror horizontally.
The default language shown when a translation is missing. Usually English. Prevents blank text from appearing.
Groups of translations organized by feature (e.g., 'auth', 'dashboard'). Keeps translation files manageable.
It is not just button labels. Here is everything you need to think about when going multi-language.
Built specifically for Next.js. Handles routing, translation loading, and formatting. The go-to choice for Next.js apps.
The most popular React translation library. Works anywhere, massive community, lots of plugins.
A platform where translators work on your files. Syncs with GitHub and auto-creates pull requests with new translations.
Translation management with a visual editor. Translators can see your app while translating for better context.
Translation files live in a messages or locales folder. Each language gets its own file with the same keys.
Each file contains the same keys but with translated values. For example, the key “welcome” might map to “Welcome” in English and “Bienvenido” in Spanish.
Copy-paste these prompts into your AI tool to apply what you just learned.
ADD MULTI-LANGUAGE SUPPORT
"Add multi-language support to my Next.js app. I need [English, Spanish, French]. Set up the translation system and translate my [homepage/navigation/footer]."
BUILD A LANGUAGE SWITCHER
"Create a language switcher component that lets users toggle between [languages]. Remember their preference in localStorage."
When asking AI to add internationalization, specify which languages and which library to use.
Add multi-language support with English and Spanish using next-intl with a language switcher in the header
Extract all hardcoded text on the landing page into translation files for English and French
Add RTL support so the layout mirrors correctly when Arabic is selected
Format all dates and currency amounts using the user's locale with Intl APIs
Create a language dropdown in the nav that switches between English, Spanish, and Japanese
