Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI
Интеграция сервера MCP Intlayer в ваш любимый AI-ассистент позволяет получать все документы непосредственно из ChatGPT, DeepSeek, Cursor, VSCode и т.д.
Просмотр документации сервера MCPСодержимое этой страницы было переведено с помощью ИИ.
Смотреть последнюю версию оригинального контента на английскомЕсли у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHubКопировать Markdown документа в буфер обмена
Интеграция с Next.js: Документация по хуку useIntlayerAsync
Хук useIntlayerAsync расширяет функциональность useIntlayer, возвращая не только предварительно отрендеренные словари, но и асинхронно загружая обновления, что делает его идеальным для приложений, которые часто обновляют локализованный контент после первоначального рендера.
Обзор
- Асинхронная загрузка словарей:
На стороне клиента useIntlayerAsync сначала возвращает предварительно отрендеренный словарь локали (так же, как и useIntlayer), а затем асинхронно загружает и объединяет любые новые доступные удалённые словари. - Управление состоянием загрузки:
Хук также предоставляет состояние isLoading, которое указывает, когда происходит загрузка удалённого словаря. Это позволяет разработчикам отображать индикаторы загрузки или скелетоны для более плавного пользовательского опыта.
Настройка окружения
Intlayer предоставляет безголовую систему управления источниками контента (CSM), которая позволяет неразработчикам легко управлять и обновлять содержимое приложения. Используя интуитивно понятную панель управления Intlayer, ваша команда может редактировать локализованные тексты, изображения и другие ресурсы без прямого изменения кода. Это упрощает процесс управления контентом, способствует сотрудничеству и обеспечивает возможность быстрого и лёгкого внесения обновлений.
Чтобы начать работу с Intlayer, вам сначала нужно зарегистрироваться и получить токен доступа на панели управления. После получения учетных данных добавьте их в файл конфигурации, как показано ниже:
Копировать код в буфер обмена
import type { IntlayerConfig } from "intlayer";export default { // ... editor: { clientId: process.env.INTLAYER_CLIENT_ID, clientSecret: process.env.INTLAYER_CLIENT_SECRET, },} satisfies IntlayerConfig;
После настройки ваших учетных данных вы можете загрузить новый словарь локали в Intlayer, выполнив команду:
Копировать код в буфер обмена
npx intlayer dictionary push -d my-first-dictionary-key
Эта команда загружает ваши начальные словари контента, делая их доступными для асинхронного получения и редактирования через платформу Intlayer.
Импорт useIntlayerAsync в Next.js
Поскольку useIntlayerAsync предназначен для клиентских компонентов, импортируйте его из той же клиентской точки входа, что и useIntlayer:
Копировать код в буфер обмена
"use client";import { useIntlayerAsync } from "next-intlayer";
Убедитесь, что импортируемый файл аннотирован директивой "use client" в начале, если вы используете Next.js App Router с разделением серверных и клиентских компонентов.
Параметры
key:
Тип: DictionaryKeys
Ключ словаря, используемый для идентификации блока локализованного контента. Этот ключ должен быть определён в ваших файлах декларации контента.locale (необязательно):
Тип: Locales
Конкретная локаль, на которую вы хотите ориентироваться. Если не указано, хук использует локаль из клиентского контекста.isRenderEditor (необязательно, по умолчанию true):
Тип: boolean
Определяет, должен ли контент быть готовым для рендеринга с наложением редактора Intlayer. Если установлено в false, возвращаемые данные словаря не будут содержать функции, специфичные для редактора.
Возвращаемое значение
Хук возвращает объект словаря, содержащий локализованный контент, ключи которого — key и locale. Также он включает булевое значение isLoading, указывающее, загружается ли в данный момент удалённый словарь.
Пример использования в Next.js
Пример клиентского компонента
Копировать код в буфер обмена
"use client";import { useEffect, type FC } from "react";import { useIntlayerAsync } from "next-intlayer";export const AsyncClientComponentExample: FC = () => { const { title, description, isLoading } = useIntlayerAsync("async-component"); useEffect(() => { if (isLoading) { console.log("Контент загружается..."); } }, [isLoading]); return ( <div> <h1>{title.value}</h1> <p>{description.value}</p> </div> );};
Ключевые моменты:
- При первоначальном рендеринге title и description берутся из предварительно отрендеренного словаря локали.
- Пока isLoading равно true, в фоновом режиме выполняется удалённый запрос для получения обновлённого словаря.
- После завершения запроса title и description обновляются с новым содержимым, а isLoading возвращается к значению false.
Обработка локализации атрибутов
Как и с useIntlayer, вы можете получать локализованные значения атрибутов для различных HTML-свойств (например, alt, title, aria-label):
Копировать код в буфер обмена
<img src={title.image.src.value} alt={title.image.alt.value} />
Файлы словарей
Все ключи контента должны быть определены в ваших файлах деклараций контента для обеспечения типовой безопасности и предотвращения ошибок во время выполнения. Эти файлы позволяют TypeScript выполнять проверку, гарантируя, что вы всегда ссылаетесь на существующие ключи и локали.
Инструкции по настройке файлов декларации контента доступны здесь.
Дополнительная информация
- Визуальный редактор Intlayer:
Интеграция с визуальным редактором Intlayer для управления и редактирования контента непосредственно из пользовательского интерфейса. Подробнее здесь.
В итоге, useIntlayerAsync — это мощный клиентский хук, предназначенный для улучшения пользовательского опыта и поддержания актуальности контента за счёт объединения предварительно отрендеренных словарей с асинхронными обновлениями словарей. Используя isLoading и декларации контента на основе TypeScript, вы можете бесшовно интегрировать динамический, локализованный контент в ваши приложения Next.js.
История документации
- 5.5.10 - 2025-06-29: Инициализация истории