--- createdAt: 2025-08-23 updatedAt: 2025-12-30 title: Як перекласти ваш бекенд на Express – i18n посібник 2026 description: Дізнайтеся, як зробити ваш бекенд на Express багатомовним. Дотримуйтесь документації, щоб інтернаціоналізувати (i18n) та перекласти його. keywords: - Інтернаціоналізація - Документація - Intlayer - Express - JavaScript - Бекенд slugs: - doc - environment - express applicationTemplate: https://github.com/aymericzip/intlayer-express-template history: - version: 7.5.9 date: 2025-12-30 changes: Додано команду init - version: 5.5.10 date: 2025-06-29 changes: Ініціалізація історії --- # Перекладіть свій бекенд на Express за допомогою Intlayer | Інтернаціоналізація (i18n) `express-intlayer` — потужний middleware для інтернаціоналізації (i18n) для додатків Express, призначений зробити ваші бекенд-сервіси доступними глобально, надаючи локалізовані відповіді відповідно до переваг клієнта. ### Практичні сценарії використання - **Відображення помилок бекенду мовою користувача**: Коли виникає помилка, відображення повідомлень рідною мовою користувача покращує розуміння та зменшує фрустрацію. Це особливо корисно для динамічних повідомлень про помилки, які можуть відображатися у фронтенд-компонентах, таких як toasts або модальні вікна. - **Отримання багатомовного контенту**: Для додатків, що отримують контент із бази даних, інтернаціоналізація забезпечує можливість надавати цей контент кількома мовами. Це критично важливо для платформ, таких як e-commerce сайти або системи управління контентом (CMS), які повинні відображати описи товарів, статті та інший контент мовою, яку віддає перевагу користувач. - **Надсилання багатомовних електронних листів**: Незалежно від того, чи це транзакційні листи, маркетингові кампанії або сповіщення, надсилання листів мовою отримувача може суттєво підвищити залучення та ефективність. - **Багатомовні push-повідомлення**: Для мобільних додатків надсилання push-повідомлень мовою, якої надає перевагу користувач, може підвищити взаємодію та утримання. Такий персоналізований підхід робить повідомлення більш релевантними та спонукає до дії. - **Інші комунікації**: Будь-які форми комунікації з бекенду, такі як SMS-повідомлення, системні сповіщення або оновлення інтерфейсу користувача, виграють від локалізації мовою користувача, що забезпечує зрозумілість і покращує загальний досвід. Інтернаціоналізація бекенду дозволяє вашому застосунку не лише поважати культурні відмінності, але й краще відповідати вимогам глобального ринку, що робить її ключовим кроком для масштабування ваших сервісів у всьому світі. ## Початок роботи ### Встановлення Щоб почати використовувати `express-intlayer`, встановіть пакет за допомогою npm: ```bash packageManager="npm" npm install intlayer express-intlayer npx intlayer init ``` ```bash packageManager="pnpm" pnpm add intlayer express-intlayer pnpm intlayer init ``` ```bash packageManager="yarn" yarn add intlayer express-intlayer yarn intlayer init ``` ```bash packageManager="bun" bun add intlayer express-intlayer bunx intlayer init ``` ### Налаштування Налаштуйте параметри internationalization, створивши `intlayer.config.ts` у корені проєкту: ```typescript fileName="intlayer.config.ts" codeFormat="typescript" 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; ``` ```javascript fileName="intlayer.config.mjs" codeFormat="esm" import { Locales } from "intlayer"; /** @type {import('intlayer').IntlayerConfig} */ const config = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH_MEXICO, Locales.SPANISH_SPAIN, ], defaultLocale: Locales.ENGLISH, }, }; export default config; ``` ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs" const { Locales } = require("intlayer"); /** @type {import('intlayer').IntlayerConfig} */ const config = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH_MEXICO, Locales.SPANISH_SPAIN, ], defaultLocale: Locales.ENGLISH, }, }; module.exports = config; ``` ### Оголосіть свій контент Створюйте й керуйте деклараціями контенту для зберігання перекладів: ```typescript fileName="src/index.content.ts" contentDeclarationFormat="typescript" import { t, type Dictionary } from "intlayer"; const indexContent = { key: "index", content: { exampleOfContent: t({ uk: "Приклад поверненого вмісту українською", 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; ``` ```javascript fileName="src/index.content.mjs" contentDeclarationFormat="esm" import { t } from "intlayer"; /** @type {import('intlayer').Dictionary} */ const indexContent = { key: "index", content: { exampleOfContent: t({ uk: "Приклад поверненого вмісту українською", 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)", }), }, }; export default indexContent; ``` ```javascript fileName="src/index.content.cjs" contentDeclarationFormat="commonjs" const { t } = require("intlayer"); /** @type {import('intlayer').Dictionary} */ const indexContent = { key: "index", content: { exampleOfContent: t({ uk: "Приклад поверненого вмісту українською", en: "Example of returned content in English", fr: "Exemple de contenu renvoyé en français", uk: "Приклад поверненого вмісту українською", "es-ES": "Ejemplo de contenido devuelto en español (España)", "es-MX": "Ejemplo de contenido devuelto en español (México)", }), }, }; module.exports = indexContent; ``` ```json fileName="src/index.content.json" contentDeclarationFormat="json" { "$schema": "https://intlayer.org/schema.json", "key": "index", "content": { "exampleOfContent": { "nodeType": "translation", "translation": { "uk": "Приклад поверненого вмісту українською", "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)" } } } } ``` > Ваші декларації вмісту можуть бути визначені будь-де у вашому додатку, доки вони включені до директорії `contentDir` (за замовчуванням `./src`). І відповідати розширенню файлу декларації вмісту (за замовчуванням `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`). > Для детальнішої інформації зверніться до [документації щодо декларацій вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md). ### Налаштування Express-застосунку Налаштуйте ваш Express-застосунок для використання `express-intlayer`: ```typescript fileName="src/index.ts" codeFormat="typescript" import express, { type Express } from "express"; import { intlayer, t, getDictionary, getIntlayer } from "express-intlayer"; import dictionaryExample from "./index.content"; const app: Express = express(); // Підключення обробника інтернаціоналізації запитів app.use(intlayer()); // Маршрути app.get("/t_example", (_req, res) => { res.send( t({ uk: "Приклад поверненого вмісту українською", 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)", }) ); }); app.get("/getIntlayer_example", (_req, res) => { res.send(getIntlayer("index").exampleOfContent); }); app.get("/getDictionary_example", (_req, res) => { res.send(getDictionary(dictionaryExample).exampleOfContent); }); // Запуск сервера app.listen(3000, () => console.log(`Сервер запущено на порту 3000`)); ``` ```javascript fileName="src/index.mjs" codeFormat="esm" import express from "express"; import { intlayer, t, getDictionary, getIntlayer } from "express-intlayer"; import dictionaryExample from "./index.content"; const app = express(); // Підключити обробник запитів інтернаціоналізації app.use(intlayer()); // Маршрути app.get("/t_example", (_req, res) => { res.send( t({ uk: "Приклад поверненого вмісту українською", 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)", }) ); }); app.get("/getIntlayer_example", (_req, res) => { res.send(getIntlayer("index").exampleOfContent); }); app.get("/getDictionary_example", (_req, res) => { res.send(getDictionary(dictionaryExample).exampleOfContent); }); // Запустити сервер app.listen(3000, () => console.log(`Слухаю порт 3000`)); ``` ```javascript fileName="src/index.cjs" codeFormat="commonjs" const express = require("express"); const { intlayer, t, getDictionary, getIntlayer } = require("express-intlayer"); const dictionaryExample = require("./index.content"); const app = express(); // Підключаємо обробник інтернаціоналізації app.use(intlayer()); // Маршрути app.get("/t_example", (_req, res) => { res.send( t({ uk: "Приклад поверненого вмісту українською", 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)", }) ); }); app.get("/getIntlayer_example", (_req, res) => { res.send(getIntlayer("index").exampleOfContent); }); app.get("/getDictionary_example", (_req, res) => { res.send(getDictionary(dictionaryExample).exampleOfContent); }); // Start server app.listen(3000, () => console.log(`Listening on port 3000`)); ``` ### Сумісність `express-intlayer` повністю сумісний з: - [`react-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/index.md) для додатків React - [`next-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/next-intlayer/index.md) для додатків Next.js - [`vite-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/vite-intlayer/index.md) для додатків Vite Воно також безшовно працює з будь-яким рішенням для інтернаціоналізації в різних середовищах, включно з браузерами та API-запитами. Ви можете налаштувати middleware для визначення локалі через headers або cookies: ```typescript fileName="intlayer.config.ts" codeFormat="typescript" import { Locales, type IntlayerConfig } from "intlayer"; const config: IntlayerConfig = { // ... Інші параметри конфігурації middleware: { headerName: "my-locale-header", cookieName: "my-locale-cookie", }, }; export default config; ``` ```javascript fileName="intlayer.config.mjs" codeFormat="esm" import { Locales } from "intlayer"; /** @type {import('intlayer').IntlayerConfig} */ const config = { // ... Інші параметри конфігурації middleware: { headerName: "my-locale-header", cookieName: "my-locale-cookie", }, }; export default config; ``` ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs" const { Locales } = require("intlayer"); /** @type {import('intlayer').IntlayerConfig} */ const config = { // ... Інші параметри конфігурації middleware: { headerName: "my-locale-header", cookieName: "my-locale-cookie", }, }; module.exports = config; ``` За замовчуванням `express-intlayer` буде інтерпретувати заголовок `Accept-Language` для визначення переважної мови клієнта. > Для отримання додаткової інформації про конфігурацію та розширені теми перегляньте нашу [документацію](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md). ### Налаштування TypeScript `express-intlayer` використовує потужні можливості TypeScript для покращення процесу інтернаціоналізації. Статична типізація TypeScript гарантує, що кожен ключ перекладу врахований, зменшуючи ризик відсутніх перекладів та покращуючи підтримуваність. ![Автозаповнення](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true) ![Помилка перекладу](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true) Переконайтеся, що автогенеровані типи (за замовчуванням у ./types/intlayer.d.ts) включені у ваш файл tsconfig.json. ```json5 fileName="tsconfig.json" { // ... Ваші існуючі конфігурації TypeScript "include": [ // ... Ваші існуючі конфігурації TypeScript ".intlayer/**/*.ts", // Включити автогенеровані типи ], } ``` ### Розширення для VS Code Щоб покращити ваш досвід розробки з Intlayer, ви можете встановити офіційне **розширення Intlayer для VS Code**. [Встановити з Marketplace для VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension) Це розширення надає: - **Автодоповнення** для ключів перекладу. - **Виявлення помилок у реальному часі** для відсутніх перекладів. - **Вбудовані попередні перегляди** перекладеного контенту. - **Швидкі дії** для простого створення та оновлення перекладів. Для детальнішої інформації про використання розширення див. [документацію розширення Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension). ### Конфігурація Git Рекомендується ігнорувати файли, згенеровані Intlayer. Це дозволяє уникнути їх додавання до вашого Git-репозиторію. Для цього ви можете додати наступні інструкції до файлу `.gitignore`: ```plaintext fileName=".gitignore" # Ігнорувати файли, згенеровані Intlayer .intlayer ```