Як зробити компонент багатомовним (i18n) за допомогою Intlayer

У цьому посібнику показано мінімальні кроки, щоб зробити UI-компонент багатомовним у двох поширених налаштуваннях:

• React (Vite/SPA)
• Next.js (App Router)

Спочатку ви оголосите свій вміст, а потім отримаєте його у своєму компоненті.

1) Оголосіть свій вміст (спільно для React і Next.js)

Створіть файл оголошення вмісту поруч із вашим компонентом. Це тримає переклади близько до місця їх використання і забезпечує type safety.

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "component-example",  content: {    title: t({      uk: "Привіт",      en: "Hello",      fr: "Bonjour",      es: "Hola",    }),    description: t({      uk: "Багатомовний React-компонент",      en: "A multilingual React component",      fr: "Un composant React multilingue",      es: "Un componente React multilingüe",    }),  },} satisfies Dictionary;export default componentContent;

JSON також підтримується, якщо ви віддаєте перевагу конфігураційним файлам.

{  "$schema": "https://intlayer.org/schema.json",  "key": "component-example",  "content": {    "title": {      "nodeType": "translation",      "translation": {        "uk": "Привіт",        "en": "Hello",        "fr": "Bonjour",        "es": "Hola"      }    },    "description": {      "nodeType": "translation",      "translation": {        "uk": "Багатомовний React-компонент",        "en": "A multilingual React component",        "fr": "Un composant React multilingue",        "es": "Un componente React multilingüe"      }    }  }}

2) Отримайте свій вміст

Випадок A. React-додаток (Vite/SPA)

Стандартний підхід: використовуйте useIntlayer для отримання за ключем. Це тримає компоненти компактними та типізованими.

import { useIntlayer } from "react-intlayer";export function ComponentExample() {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );}

Для server-side рендерингу або за межами провайдера: використовуйте react-intlayer/server і передавайте явний параметр locale, коли це потрібно.

import { useIntlayer } from "react-intlayer/server";export function ServerRenderedExample({ locale }: { locale: string }) {  const content = useIntlayer("component-example", locale);  return (    <>      <h1>{content.title}</h1>      <p>{content.description}</p>    </>  );}

Альтернатива: useDictionary може зчитувати всю оголошену структуру, якщо ви віддаєте перевагу розміщенню структури в місці виклику.

import { useDictionary } from "react-intlayer";import componentContent from "./component.content";export function ComponentWithDictionary() {  const { title, description } = useDictionary(componentContent);  return (    <div>      <h1>{title}</h1>      <p>{description}</p>    </div>  );}

Варіант B. Next.js (App Router)

Надавайте перевагу server components для безпеки даних та продуктивності. Використовуйте useIntlayer з next-intlayer/server у серверних файлах, а useIntlayer з next-intlayer, у client components.

import { useIntlayer } from "next-intlayer/server";export default function ServerComponent() {  const content = useIntlayer("component-example");  return (    <>      <h1>{content.title}</h1>      <p>{content.description}</p>    </>  );}

"use client";import { useIntlayer } from "next-intlayer";export function ClientComponent() {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );}

Порада: Для метаданих сторінки та SEO ви також можете отримувати контент за допомогою getIntlayer та генерувати багатомовні URL-адреси за допомогою getMultilingualUrls.

Чому компонентний підхід Intlayer найкращий

• Колокація: декларації контенту знаходяться поруч із компонентами, що зменшує розбіжності та покращує повторне використання в дизайн-системах.
• Типобезпека: ключі та структури строго типізовані; відсутні переклади виявляються під час збірки, а не під час виконання.
• Server-first: Працює нативно в серверних компонентах для кращої безпеки та продуктивності; client hooks залишаються ергономічними.
• Tree-shaking: У бандл потрапляє лише контент, який використовує компонент, що допомагає зменшити розмір payload у великих додатках.
• DX & tooling: Вбудований middleware, SEO-хелпери та необов'язкові Visual Editor/AI-переклади спрощують щодену роботу.

Дивіться порівняння та шаблони в огляді, орієнтованому на Next.js: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer

Пов'язані посібники та довідкові матеріали

• Налаштування React (Vite): https://intlayer.org/doc/environment/vite-and-react
• React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
• TanStack Start: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
• Налаштування Next.js: https://intlayer.org/doc/environment/nextjs
• Чому обрати Intlayer замість next-intl та next-i18next - https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer

Ці сторінки містять end-to-end налаштування, провайдери, маршрутизацію та SEO-хелпери.