Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту
Інтегрувавши Intlayer MCP Server у свого улюбленого AI-помічника, ви зможете отримувати всю документацію безпосередньо через ChatGPT, DeepSeek, Cursor, VSCode тощо.
Переглянути документацію MCP ServerІсторія версій
- Ініціалізація історіїv5.5.1029.06.2025
Вміст цієї сторінки перекладено за допомогою штучного інтелекту.
Переглянути останню версію оригінального вмісту англійськоюЯкщо у вас є ідея щодо покращення цієї документації, будь ласка, долучіться, надіславши pull request на GitHub.
Посилання на документацію на GitHubСкопіювати документацію у форматі Markdown в буфер обміну
Переклад
Визначення перекладів
Функція t в intlayer дозволяє оголошувати контент кількома мовами. Ця функція забезпечує типобезпеку, викликаючи помилку, якщо будь-які переклади відсутні, що особливо корисно в середовищах TypeScript.
Ось приклад того, як оголосити контент із перекладами.
Скопіюйте код у буфер обміну
import { t, type Dictionary } from "intlayer";interface Content { welcomeMessage: string;}export default { key: "multi_lang", content: { welcomeMessage: t({ uk: "Ласкаво просимо до нашого застосунку", en: "Welcome to our application", fr: "Bienvenue dans notre application", es: "Bienvenido a nuestra aplicación", }), },} satisfies Dictionary<Content>;Налаштування локалей
Щоб забезпечити коректну обробку перекладів, ви можете налаштувати прийняті локалі в intlayer.config.ts. Ця конфігурація дозволяє визначити мови, які підтримує ваш додаток:
Скопіюйте код у буфер обміну
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], },};export default config;Використання перекладів у React-компонентах
За допомогою react-intlayer ви можете використовувати переклади у React-компонентах. Ось приклад:
Скопіюйте код у буфер обміну
import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => { const content = useIntlayer("multi_lang"); return ( <div> <p>{content.welcomeMessage}</p> </div> );};export default MyComponent;Цей компонент отримує відповідний переклад на основі поточної локалі, встановленої у вашому додатку.
Користувацькі об'єкти контенту
intlayer підтримує власні об'єкти вмісту для перекладу, що дає змогу визначати складніші структури та забезпечує type safety. Ось приклад із кастомним об'єктом:
Скопіюйте код у буфер обміну
import { t, type Dictionary } from "intlayer";interface ICustomContent { title: string; content: string;}const customContent = { key: "custom_content", content: { profileText: t<ICustomContent>({ uk: { title: "Заголовок сторінки", content: "Вміст сторінки", }, en: { title: "Page Title", content: "Page Content", }, fr: { title: "Titre de la Page", content: "Contenu de la Page", }, es: { title: "Título de la Página", content: "Contenido de la Página", }, }), },} satisfies Dictionary;export default customContent;