Интернационализация (i18n) бэкенда в Express с использованием Intlayer19.12.2024 09:30

74e4b19b4dccfe5cf225823fdefe6ae2

Всем привет!

Недавно мне понадобилось добавить поддержку нескольких языков в API на базе Express. Я решил поделиться кратким руководством для тех, кто хочет сделать свой бэкенд отвечающим переведенным контентом в зависимости от предпочтительного языка пользователя.

Зачем интернационализировать ваш бэкенд?

Вот несколько практических примеров использования интернационализации на бэкенде:

  • Отображение ошибок бэкенда на языке пользователя: Показывайте сообщения об ошибках на родном языке пользователя, чтобы улучшить понимание и снизить уровень фрустрации. Это позволяет отображать ошибки напрямую в уведомлениях без необходимости их сопоставления на фронтенде.

  • Отправка многоязычных электронных писем, push-уведомлений и т.д.: Повышайте вовлеченность, отправляя транзакционные, маркетинговые или уведомительные письма на языке получателя. Локализуйте push-уведомления, SMS-сообщения для обеспечения ясности и улучшения пользовательского опыта.

  • Получение многоязычного контента: Предоставляйте контент из вашей базы данных на нескольких языках.

Начало работы

Установка

Сначала установите необходимые пакеты, используя предпочитаемый вами менеджер пакетов: 

npm install intlayer express-intlayer

Настройка

Далее, настройте параметры интернационализации, создав файл intlayer.config.ts в корне вашего проекта: 

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

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

export default config;

Настройка приложения Express

Теперь настройте ваше приложение Express для использования express-intlayer: 

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

const app: Express = express();

// Загрузка обработчика запросов интернационализации
app.use(intlayer());

// Маршруты
app.get("/", (_req, res) => {
  res.send(
    t({
      ru: "Пример возвращенного контента на русском языке",
      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)",
    })
  );
});

// Запуск сервера
app.listen(3000);

Совместимость

express-intlayer работает беспрепятственно с react-intlayer или next-intlayer. Но он также совместим с различными решениями для интернационализации.

Настройка обнаружения локали

По умолчанию express-intlayer использует заголовок Accept-Language для определения предпочтительного языка клиента. Вы можете настроить это поведение для обнаружения локалей через заголовки или куки: 

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

const config: IntlayerConfig = {
  // Другие параметры конфигурации
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

Не стесняйтесь ознакомиться с официальной документацией для более продвинутых настроек и возможностей, а также с официальным сайтом решения.

© Habrahabr.ru