Интеграция с 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: Узнайте, как использовать визуальный редактор для более удобного управления контентом здесь.

В этой документации описывается использование хука useIntlayer специально в средах Next.js, предоставляя надежное решение для управления локализацией в ваших приложениях Next.js.