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

Creating applications that cater to users from different countries and languages can significantly enhance your app’s reach and user satisfaction. With express-intlayer, adding internationalization (i18n) to your Express backend is straightforward and efficient. In this post, we'll guide you through setting up express-intlayer to make your Express application multilingual, ensuring a better experience for users around the world.

Why Internationalize Your Backend?

Internationalizing your backend allows your application to communicate effectively with a global audience. By serving content in the user’s preferred language, you can improve user experience and make your app more accessible. Here are some practical reasons to consider internationalizing your backend:

• Localized Error Messages: Show error messages in the user's native language to reduce confusion and frustration.
• Multilingual Content Retrieval: Serve content from your database in multiple languages, perfect for e-commerce sites or content management systems.
• Localized Emails and Notifications: Send transactional emails, marketing campaigns, or push notifications in the recipient’s preferred language to increase engagement.
• Enhanced User Communication: Whether it’s SMS messages, system alerts, or UI updates, delivering them in the user’s language ensures clarity and improves the overall experience.

Internationalizing your backend not only respects cultural differences but also opens up your application to a broader audience, making it easier to scale globally.

Introducing express-intlayer

express-intlayer is a middleware designed for Express applications that integrates seamlessly with the intlayer ecosystem to handle localization on the backend. Here’s why it’s a great choice:

• Easy Setup: Quickly configure your Express app to serve responses based on user locale preferences.
• TypeScript Support: Leverage TypeScript’s static typing to ensure all translation keys are accounted for, reducing errors.
• Flexible Configuration: Customize how locales are detected, whether through headers, cookies, or other methods.

For more detailed information, visit the complete documentation.

Getting Started

Let’s walk through the steps to set up express-intlayer in your Express application.

Step 1: Installation

First, install express-intlayer along with intlayer using your preferred package manager:

npm install intlayer express-intlayer

pnpm add intlayer express-intlayer

yarn add intlayer express-intlayer

Step 2: Configuration

Next, create an intlayer.config.ts file in the root of your project. This file will define the supported locales and the default language for your application:

// 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;

In this example, we’re supporting English, French, Spanish (Mexico), and Spanish (Spain), with English set as the default language.

Step 3: Express Middleware Integration

Now, integrate express-intlayer into your Express application. Here’s how you can set it up in your src/index.ts:

import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";

const app: Express = express();

// Use intlayer middleware
app.use(intlayer());

// Sample route: Serving localized content
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)",
    })
  );
});

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

app.listen(3000, () => {
  console.info(`Listening on port 3000`);
});

In this setup:

• The intlayer middleware detects the user’s locale, typically from the Accept-Language header.
• The t() function returns the appropriate translation based on the detected locale.
• If the requested language isn’t available, it falls back to the default locale (English in this case).

Customizing Locale Detection

By default, express-intlayer uses the Accept-Language header to determine the user’s preferred language. However, you can customize this behavior in your intlayer.config.ts:

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

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

export default config;

This flexibility allows you to detect the locale through custom headers, cookies, or other mechanisms, making it adaptable to various environments and client types.

Compatibility with Other Frameworks

express-intlayer works well with other parts of the intlayer ecosystem, including:

• react-intlayer for React applications
• next-intlayer for Next.js applications

This integration ensures a consistent internationalization strategy across your entire stack, from the backend to the frontend.

Leveraging TypeScript for Robust i18n

Built with TypeScript, express-intlayer offers strong typing for your internationalization process. This means:

• Type Safety: Catch missing translation keys at compile time.
• Improved Maintainability: Easier to manage and update translations with TypeScript’s tooling.
• Generated Types: Ensure your translations are correctly referenced by including the generated types (by default at ./types/intlayer.d.ts) in your tsconfig.json.

Wrapping Up

Adding internationalization to your Express backend with express-intlayer is a smart move to make your application more accessible and user-friendly for a global audience. With its easy setup, TypeScript support, and flexible configuration options, express-intlayer simplifies the process of delivering localized content and communications.

Ready to make your backend multilingual? Start using express-intlayer in your Express application today and provide a seamless experience for users around the world.

For more details, configuration options, and advanced usage patterns, check out the official complete documentation or visit the GitHub repository to explore the source code and contribute.

Comments

[Pengyu Chans]

Interesting for emailing!