import type { FC } from "react";
import { useDictionary } from "react-intlayer";
import componentContent from "./component.content";

const ComponentExample: FC = () => {
  const { title, content } = useDictionary(componentContent);

  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
};

Інтеграція на сервері

Якщо ви використовуєте хук useDictionary поза межами IntlayerProvider, локаль має бути явно передана як параметр під час рендерингу компонента:

./ServerComponentExample.tsx

Копіювати код

Скопіюйте код у буфер обміну

import type { FC } from "react";
import { useDictionary } from "react-intlayer/server";
import clientComponentExampleContent from "./component.content";

const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {
  const { content } = useDictionary(clientComponentExampleContent, locale);

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.content}</p>
    </div>
  );
};

Додаткові поради

Type Safety: Завжди використовуйте Dictionary для визначення ваших словників, щоб забезпечити Type Safety.
Localization Updates: Під час оновлення контенту переконайтеся, що всі локалі узгоджені, щоб уникнути відсутніх перекладів.

Ця документація зосереджена на інтеграції хука useDictionary, надаючи оптимізований підхід до керування локалізованим контентом без покладання на функціональність візуальних редакторів.

useI18n