--- createdAt: 2025-12-30 updatedAt: 2025-12-30 title: Як перекласти ваш Fastify-бекенд – посібник з i18n 2026 description: Дізнайтеся, як зробити ваш Fastify-бекенд багатомовним. Дотримуйтеся документації, щоб інтернаціоналізувати (i18n) та перекласти його. keywords: - Інтернаціоналізація - Документація - Intlayer - Fastify - JavaScript - Бекенд slugs: - doc - environment - fastify applicationTemplate: https://github.com/aymericzip/intlayer-fastify-template history: - version: 7.6.0 date: 2025-12-31 changes: Додано команду init - version: 7.6.0 date: 2025-12-31 changes: Ініціалізовано історію --- # Переклад вашого Fastify-бекенду за допомогою Intlayer | Інтернаціоналізація (i18n) `fastify-intlayer` — потужний плагін для інтернаціоналізації (i18n) для додатків на Fastify, призначений зробити ваші бекенд-сервіси доступними глобально, надаючи локалізовані відповіді на основі налаштувань клієнта. ### Практичні сценарії використання - **Відображення помилок бекенда мовою користувача**: коли виникає помилка, відображення повідомлень рідною мовою користувача покращує розуміння і зменшує фрустрацію. Це особливо корисно для динамічних повідомлень про помилки, які можуть показуватися у фронтенд-компонентах, таких як тости або модальні вікна. - **Отримання багатомовного контенту**: Для застосунків, що отримують контент із бази даних, інтернаціоналізація забезпечує можливість надавати цей контент кількома мовами. Це критично важливо для платформ, таких як e-commerce сайти або системи управління контентом (CMS), які повинні відображати описи товарів, статті та інший контент мовою, якою віддає перевагу користувач. - **Надсилання багатомовних електронних листів**: Чи то транзакційні листи, маркетингові кампанії або сповіщення — надсилання електронних листів мовою отримувача може значно підвищити залученість і ефективність. - **Багатомовні push-повідомлення**: Для мобільних додатків надсилання push-повідомлень мовою, якою віддає перевагу користувач, може підвищувати взаємодію та утримання. Такий персональний підхід робить повідомлення більш релевантними та спонукає до дії. - **Інші комунікації**: Будь-яка форма комунікації з боку бекенду, наприклад SMS-повідомлення, системні сповіщення або оновлення інтерфейсу, виграє від використання мови користувача, що забезпечує зрозумілість і покращує загальний досвід користувача. Інтернаціоналізація бекенду дозволяє вашому застосунку не лише поважати культурні відмінності, а й краще відповідати потребам глобальних ринків, роблячи це ключовим кроком для масштабування сервісів у всьому світі. ## Початок роботи ### Встановлення Щоб почати використовувати `fastify-intlayer`, встановіть пакет через npm: ```bash packageManager="npm" npm install intlayer fastify-intlayer npx intlayer init ``` ```bash packageManager="pnpm" pnpm add intlayer fastify-intlayer pnpm intlayer init ``` ```bash packageManager="yarn" yarn add intlayer fastify-intlayer yarn intlayer init ``` ```bash packageManager="bun" bun add intlayer fastify-intlayer bunx intlayer init ``` ### Налаштування Налаштуйте параметри інтернаціоналізації, створивши файл `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", "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). ### Налаштування застосунку Fastify Налаштуйте ваш застосунок Fastify для використання `fastify-intlayer`: ```typescript fileName="src/index.ts" codeFormat="typescript" 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({ 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)", }); }); 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(); ``` ```javascript fileName="src/index.mjs" codeFormat="esm" 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({ 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)", }); }); 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(); ``` ```javascript fileName="src/index.cjs" codeFormat="commonjs" const Fastify = require("fastify"); const { intlayer, t, getDictionary, getIntlayer } = require("fastify-intlayer"); const dictionaryExample = require("./index.content"); const fastify = Fastify({ logger: true }); // Обгортка запуску сервера для async/await const start = async () => { try { // Завантажити плагін інтернаціоналізації await fastify.register(intlayer); // Маршрути fastify.get("/t_example", async (_req, reply) => { return 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)", }); }); fastify.get("/getIntlayer_example", async (_req, reply) => { return getIntlayer("index").exampleOfContent; }); fastify.get("/getDictionary_example", async (_req, reply) => { return getDictionary(dictionaryExample).exampleOfContent; }); await fastify.listen({ port: 3000 }); } catch (err) { fastify.log.error(err); process.exit(1); } }; start(); ``` ### Сумісність `fastify-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`]() для додатків Vite Він також безшовно працює з будь-яким рішенням для інтернаціоналізації в різних середовищах, включно з браузерами та API-запитами. Ви можете налаштувати middleware для визначення локалі через заголовки або cookie: ```typescript fileName="intlayer.config.ts" codeFormat="typescript" import { Locales, type IntlayerConfig } from "intlayer"; const config: IntlayerConfig = { // ... Other configuration options 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; ``` За замовчуванням `fastify-intlayer` інтерпретує заголовок `Accept-Language`, щоб визначити мову, якою віддає перевагу клієнт. > Для отримання додаткової інформації про конфігурацію та розширені теми відвідайте нашу [документацію](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md). ### Налаштування TypeScript `fastify-intlayer` використовує потужні можливості TypeScript для покращення процесу інтернаціоналізації. Статична типізація TypeScript гарантує, що кожен ключ перекладу врахований, зменшуючи ризик відсутніх перекладів та підвищуючи підтримуваність. Переконайтеся, що автозгенеровані типи (за замовчуванням у ./types/intlayer.d.ts) включені у ваш файл tsconfig.json. ```json5 fileName="tsconfig.json" { // ... Ваші існуючі конфігурації TypeScript "include": [ // ... Ваші існуючі конфігурації TypeScript ".intlayer/**/*.ts", // Включити автозгенеровані типи ], } ``` ### Розширення для VS Code Щоб покращити свій досвід розробки з Intlayer, ви можете встановити офіційне розширення **Intlayer VS Code Extension**. [Встановити з VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension) Розширення надає: - **Автодоповнення** для ключів перекладу. - **Виявлення помилок у реальному часі** для відсутніх перекладів. - **Інлайн-попередні перегляди** перекладеного вмісту. - **Швидкі дії** для простого створення та оновлення перекладів. Детальніше про використання розширення див. у [документації Intlayer VS Code Extension](https://intlayer.org/doc/vs-code-extension). ### Налаштування Git Рекомендується ігнорувати файли, згенеровані Intlayer. Це дозволить уникнути їх коміту до вашого Git-репозиторію. Для цього ви можете додати такі інструкції до вашого файлу `.gitignore`: ```plaintext fileName=".gitignore" # Ігнорувати файли, згенеровані Intlayer .intlayer ```