In today’s interconnected world, it is crucial to build websites and applications that can cater to users from different countries and cultures. The process of adapting a website or application to support multiple languages and locales is called internationalization (i18n). In this blog post, we will explore how to implement i18n in Express.js applications.

What is i18n?

Internationalization (i18n) is the process of designing and developing software in a way that supports multiple languages and cultural preferences. This includes translating text, adapting date and time formats, and handling other locale-specific functionalities.

Why use i18n in Express.js?

Express.js is a popular web framework for building scalable and robust web applications. By adding i18n support to your Express.js application, you can ensure that your app reaches a wider audience and improves the overall user experience.

How to implement i18n in Express.js?

Here are the steps to implement i18n in an Express.js application:

Step 1: Install the i18n package

Start by installing the i18n package using npm:

npm install i18n

Step 2: Configure i18n

In your Express.js application, configure the i18n middleware and set up the default language and other options:

const i18n = require('i18n');

// Configure i18n
i18n.configure({
  // Define the directory where your language files reside
  directory: __dirname + '/locales',
  defaultLocale: 'en',
  // Define the language fallbacks
  fallbacks: { 'en': 'en' }
});

// Add i18n middleware to Express.js
app.use(i18n.init);

Step 3: Create language files

Create language files for each supported language in a locales folder. For example, you might have en.json for English and fr.json for French. These files should contain key-value pairs for translating text in your application:

// en.json
{
  "greeting": "Hello",
  "welcome": "Welcome to our website"
}

// fr.json
{
  "greeting": "Bonjour",
  "welcome": "Bienvenue sur notre site"
}

Step 4: Translate your application

To use translations in your application, you can access the translated text using the i18n.__() function:

app.get('/', (req, res) => {
  res.send(i18n.__('greeting'));
});

This will display the translated text based on the user’s preferred language.

Step 5: Switching languages

To allow users to switch languages, you can add language-specific links or buttons that trigger a language change:

<a href="/?lang=en">English</a>
<a href="/?lang=fr">Français</a>

In your server-side code, you can handle the language change by setting the user’s preferred language:

app.get('/', (req, res) => {
  const { lang } = req.query;
  req.setLocale(lang);
  res.redirect('/');
});

Conclusion

Implementing internationalization (i18n) in your Express.js applications allows you to adapt your app to reach a global audience. By following these steps, you can seamlessly translate your application’s text and provide a localized user experience. Embrace i18n and make your application truly multilingual! #ExpressJS #i18n