Получайте уведомления о предстоящих релизах Intlayer
    Создание:2024-08-11Последнее обновление:2025-06-29

    Интеграция с 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 для динамической загрузки локализованного контента в зависимости от текущей локали приложения:

    src/pages/[locale]/index.tsx
    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>    </>  );};
    src/components/ClientComponentExample.tsx
    "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>  );};
    src/components/ServerComponentExample.tsx
    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 и других, убедитесь, что вы правильно ссылаетесь на содержимое:

    tsx
    <img src={content.image.src.value} alt={content.image.alt.value} />

    Дополнительная информация

    • Визуальный редактор Intlayer: Узнайте, как использовать визуальный редактор для более удобного управления контентом здесь.

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

    История документации

    • 5.5.10 - 2025-06-29: Инициализация истории
    Получайте уведомления о предстоящих релизах Intlayer