Translate Your Express Backend API with express-intlayer (i18n)

I recently needed to add multilingual support to an Express-based API. I thought I’d share a brief tutorial for anyone looking to make their backend respond with translated content depending on the user’s preferred language.

Why Internationalize Your Backend?

Here are some practical use cases for backend internationalization:

• Displaying Backend Errors in User's Language: Show error messages in the user's native language to improve understanding and reduce frustration. It allows errors to be displayed directly in a toast without mapping them on the frontend.

• Sending Multilingual Emails, Push Notifications, etc: Increase engagement by sending transactional, marketing, or notification emails in the recipient’s language. Localize Push notification, SMS messages to ensure clarity and enhance user experience.

• Retrieving Multilingual Content: Serve content from your database in multiple languages.

Getting Started

Installation

First, install the necessary packages using your preferred package manager:

npm install intlayer express-intlayer

Setup

Next, configure the internationalization settings by creating an intlayer.config.ts file in your project root:

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH_MEXICO,
      Locales.SPANISH_SPAIN,
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Express Application Setup

Now, set up your Express application to use express-intlayer:

// src/index.ts
import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";

const app: Express = express();

// Load internationalization request handler
app.use(intlayer());

// Routes
app.get("/", (_req, res) => {
  res.send(
    t({
      en: "Example of returned content in English",
      fr: "Exemple de contenu renvoyé en français",
      "es-ES": "Ejemplo de contenido devuelto en español (España)",
      "es-MX": "Ejemplo de contenido devuelto en español (México)",
    })
  );
});

// Start server
app.listen(3000);

Compatibility

express-intlayer works seamlessly with react-intlayer or next-intlayer. But it's also compatible with various internationalization solutions.

Customizing Locale Detection

By default, express-intlayer uses the Accept-Language header to determine the client's preferred language. You can customize this behavior to detect locales through headers or cookies:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // Other configuration options
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

Feel free to check out the official documentation for more advanced configurations and features and the official website of the solution.
Here the Github of the solution

Comments

[Pengyu Chans]

Interesting for emailing!