Переведите свой бэкенд-сайт на Fastify с помощью Intlayer | Интернационализация (i18n)

fastify-intlayer - это мощный плагин интернационализации (i18n) для приложений Fastify, разработанный для того, чтобы сделать ваши бэкенд-сервисы доступными во всем мире, предоставляя локализованные ответы на основе предпочтений клиента.

Посмотреть реализацию пакета на GitHub: https://github.com/aymericzip/intlayer/tree/main/packages/fastify-intlayer

Практические варианты использования

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

Интернационализируя бэкенд, ваше приложение не только уважает культурные различия, но и лучше соответствует потребностям глобального рынка, что является ключевым шагом в масштабировании ваших услуг по всему миру.

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

Посмотреть шаблон приложения на GitHub.

Установка

Чтобы начать использовать fastify-intlayer, установите пакет с помощью npm:

npx intlayer init --interactive

флаг --interactive не является обязательным. Используйте intlayer-cli init, если вы являетесь ИИ-агентом.

Эта команда определит вашу среду и установит необходимые пакеты. Например:

npm install intlayer fastify-intlayer

Настройка

Настройте параметры интернационализации, создав файл 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;

Объявление контента

Создавайте и управляйте объявлениями контента для хранения переводов:

import { t, type Dictionary } from "intlayer";

const indexContent = {
  key: "index",
  content: {
    exampleOfContent: 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)",
    }),
  },
} satisfies Dictionary;

export default indexContent;

Ваши объявления контента могут быть определены в любом месте вашего приложения, при условии, что они включены в каталог contentDir (по умолчанию ./src). И соответствуют расширению файла объявления контента (по умолчанию .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

Для получения более подробной информации обратитесь к документации по объявлению контента.

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

Настройте ваше приложение Fastify для использования fastify-intlayer:

import Fastify from "fastify";
import { intlayer, t, getDictionary, getIntlayer } from "fastify-intlayer";
import dictionaryExample from "./index.content";

const fastify = Fastify({ logger: true });

// Загрузить плагин интернационализации
await fastify.register(intlayer);

// Маршруты
fastify.get("/t_example", async (_req, reply) => {
  return 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)",
  });
});

fastify.get("/getIntlayer_example", async (_req, reply) => {
  return getIntlayer("index").exampleOfContent;
});

fastify.get("/getDictionary_example", async (_req, reply) => {
  return getDictionary(dictionaryExample).exampleOfContent;
});

// Запуск сервера
const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};

start();

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

fastify-intlayer полностью совместим с:

• react-intlayer для React-приложений
• next-intlayer для Next.js-приложений
• vite-intlayer для Vite-приложений

Он также бесшовно работает с любым решением для интернационализации в различных средах, включая браузеры и API-запросы. Вы можете настроить промежуточное ПО (middleware) для определения локали через заголовки или куки:

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

const config: IntlayerConfig = {
  // ... Другие параметры конфигурации
  routing: {
    storage: [
      { type: "header", name: "my-locale-header" },
      { type: "cookie", name: "my-locale-cookie" },
    ],
  },
};

export default config;

По умолчанию fastify-intlayer будет интерпретировать заголовок Accept-Language для определения предпочтительного языка клиента.

Для получения дополнительной информации о настройке и продвинутых темах посетите нашу документацию.

Настройка TypeScript

fastify-intlayer использует мощные возможности TypeScript для улучшения процесса интернационализации. Статическая типизация TypeScript гарантирует, что каждый ключ перевода учтен, снижая риск отсутствия переводов и улучшая поддерживаемость.

Убедитесь, что автоматически сгенерированные типы (по умолчанию в ./types/intlayer.d.ts) включены в ваш файл tsconfig.json.

{
  // ... Ваши существующие конфигурации TypeScript
  "include": [
    // ... Ваши существующие конфигурации TypeScript
    ".intlayer/**/*.ts", // Включить автоматически сгенерированные типы
  ],
}

Расширение VS Code

Чтобы улучшить ваш опыт разработки с Intlayer, вы можете установить официальное расширение Intlayer VS Code Extension.

Установить из VS Code Marketplace

Это расширение предоставляет:

• Автодополнение для ключей перевода.
• Обнаружение ошибок в реальном времени для отсутствующих переводов.
• Встроенный предварительный просмотр переведенного контента.
• Быстрые действия для легкого создания и обновления переводов.

Более подробную информацию об использовании расширения можно найти в документации расширения Intlayer VS Code.

Конфигурация Git

Рекомендуется игнорировать файлы, генерируемые Intlayer. Это позволит вам избежать их коммита в ваш Git-репозиторий.

Для этого вы можете добавить следующие инструкции в ваш файл .gitignore:

# Игнорировать файлы, генерируемые Intlayer
.intlayer

Часто задаваемые вопросы