Інтеграція з Next.js: документація хуку useIntlayer

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

Імпорт useIntlayer в Next.js

Залежно від того, чи працюєте ви з компонентами на боці клієнта чи на боці сервера в додатку Next.js, хук useIntlayer можна імпортувати таким чином:

• Клієнтський компонент:

  typescript

  Копіювати вміст

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

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

  import { useIntlayer } from "next-intlayer"; // Використовується в компонентах на боці клієнта

• Серверний компонент:

  tsx

  Копіювати вміст

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

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

  import { useIntlayer } from "next-intlayer/server"; // Використовується в компонентах на боці сервера

Параметри

1. key: Рядковий ідентифікатор ключа словника, з якого потрібно отримати вміст.
2. locale (необов'язковий): Конкретна локаль для використання. Якщо пропущено, хук за замовчуванням використовує локаль, встановлену в клієнтському або серверному контексті.

Файли словника

Критично, щоб всі ключі вмісту були визначені у файлах декларації контенту, щоб уникнути помилок під час виконання та забезпечити безпеку типів. Такий підхід також полегшує інтеграцію з TypeScript для валідації на етапі компіляції.

Інструкції щодо налаштування файлів декларації контенту доступні тут.

Приклад використання в Next.js

Ось як ви можете реалізувати хук useIntlayer на сторінці Next.js, щоб динамічно завантажувати локалізований контент залежно від поточної локалі застосунку:

import { ClientComponentExample } from "@components/ClientComponentExample";
import { ServerComponentExample } from "@components/ServerComponentExample";
import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";

const HomePage: NextPageIntlayer = async ({ params }) => {
  const { locale } = await params;

  const content = useIntlayer("homepage", locale);

  return (
    <>
      <p>{content.introduction}</p>
      <IntlayerClientProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerClientProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};

"use-client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const ClientComponentExample: FC = () => {
  const content = useIntlayer("component-content");

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

import type { FC } from "react";
import { useIntlayer } from "next-intlayer/server";

const ServerComponentExample: FC = () => {
  const content = useIntlayer("component-content");

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

Локалізація атрибутів

Щоб локалізувати атрибути, такі як alt, title, href, aria-label тощо, переконайтеся, що ви правильно посилаєтеся на вміст:

<img src={content.image.src.value} alt={content.image.alt.value} /><img src={content.image.src.toString()} alt={content.image.alt.toString()} /><img src={String(content.image.src)} alt={String(content.image.alt)} />

Додаткова інформація

• Intlayer Visual Editor: Дізнайтеся, як використовувати візуальний редактор для зручнішого керування контентом тут.

Ця документація описує використання хуку useIntlayer саме в середовищах Next.js, пропонуючи надійне рішення для керування локалізацією у ваших застосунках Next.js.