Speaking the Same Language: Internationalization of JavaScript Applications

Your application will speak any language in the world

Imagine: you created a great service, published it online, and users from Germany, Japan, or Brazil close the site after 10 seconds. Why? Because they don't understand a single word written on the buttons. In the era of globalization, JavaScript internationalization is not a luxury, but a basic necessity. If you want your product to conquer the world (or at least a couple of neighboring countries), you can't do without i18n JavaScript.

In this article, we will break down how to turn an ordinary application into a multilingual polyglot. You will learn what i18n libraries exist, how to properly organize translation files, and we will write real code for internationalization. Let's go!

What is internationalization and why is it needed?

The technical term i18n (where 18 is the number of letters between the first "i" and the last "n") means the architectural preparation of an application to work with different languages and cultures. This is not just translating words — it is adapting date formats, numbers, currencies, text directions (left-to-right or right-to-left), and even color schemes.

Imagine the date "03/04/2025". For a US resident, this is April 3rd, and for a European, it's March 4th. And if your application shows a price in dollars to a user from Japan? Disaster. Web application internationalization solves all these problems at the code level.

Why start right now?

\n
• Audience growth — 75% of users prefer to buy in their native language
\n
• SEO boost — search engines rank multilingual sites higher in local results
\n
• Usability — reduced bounce rate and increased time on site
\n

Main approaches to i18n in JavaScript

There are two global approaches to JavaScript localization: a custom solution and using ready-made libraries. We will look at both, but I strongly recommend the second option — fewer bugs, more features.

Custom internationalization: basic example

If your application is a simple landing page with 10 lines, you can get by without libraries. Let's create a translations object:

const translations = {\n    ru: {\n        greeting: "Hello, World!",\n        button: "Click me"\n    },\n    en: {\n        greeting: "Hello, World!",\n        button: "Click me"\n    },\n    de: {\n        greeting: "Hallo, Welt!",\n        button: "Klick mich"\n    }\n};

Now a function for changing the language:

function translate(lang) {\n    document.querySelectorAll('[data-i18n]').forEach(el => {\n        const key = el.dataset.i18n;\n        if (translations[lang] && translations[lang][key]) {\n            el.textContent = translations[lang][key];\n        }\n    });\n}\n\n// Usage in HTML:\n// <h1 data-i18n="greeting">Hello, World!</h1>\n// <button data-i18n="button">Click me</button>

This works, but imagine you have 500 lines of text, plus you need to handle pluralization (1 apple, 2 apples, 5 apples) and interpolation (Hello, {username}). This is where internationalization libraries come to the rescue.

Top i18n libraries for JavaScript

The market for i18n libraries is diverse. Here are three leaders that deserve your attention:

1. i18next — the king of libraries

i18next JavaScript is the de facto standard. It works with React, Vue, Angular, and vanilla JS. It supports pluralization, interpolation, nested translations, and lazy loading of resources.

import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\ni18n.use(initReactI18next).init({\n    resources: {\n        en: {\n            translation: {\n                welcome: "Welcome b