Next.js統合: useIntlayerAsyncフックドキュメンテーション

useIntlayerAsyncフックは、useIntlayerの機能を拡張し、事前にレンダリングされた辞書を返すだけでなく、非同期的に更新をフェッチするため、初期レンダリング後にローカライズされたコンテンツを頻繁に更新するアプリケーションに最適です。

概要

非同期辞書の読み込み:
クライアント側では、useIntlayerAsyncは最初に事前レンダリングされたロケール辞書（useIntlayerと同様）を返し、その後非同期的に新しく利用可能なリモート辞書を取得してマージします。
進捗状態管理:
フックは、リモート辞書がフェッチされているときに示すisLoading状態も提供します。これにより、開発者はユーザー体験を向上させるためにローディングインジケーターやスケルトン状態を表示できます。

環境設定

Intlayerは、非開発者がアプリケーションコンテンツをシームレスに管理および更新できるヘッドレスコンテンツソース管理（CSM）システムを提供します。Intlayerの直感的なダッシュボードを使用することで、チームはコードを直接変更することなく、ローカライズされたテキスト、画像、およびその他のリソースを編集できます。これにより、コンテンツ管理プロセスが効率化され、コラボレーションが促進され、更新が迅速かつ簡単に行えるようになります。

Intlayerを開始するには、まず/ru/dashboardで登録し、アクセストークンを取得する必要があります。資格情報を取得したら、以下のように構成ファイルに追加します：

typescript

import { type IntlayerConfig } from 'intlayer';

export default {
  ...
  editor: {
    clientId: process.env.INTLAYER_CLIENT_ID,
    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
  },
} satisfies IntlayerConfig;

資格情報を設定したら、次のコマンドを実行してIntlayerに新しいロケール辞書をプッシュできます：

bash

npm intlayer push -d my-first-dictionary-key

このコマンドは、初期コンテンツ辞書をアップロードし、Intlayerプラットフォームを通じて非同期的な取得と編集ができるようにします。

Next.jsでのuseIntlayerAsyncのインポート

useIntlayerAsyncはクライアントサイドコンポーネント向けに設計されているため、useIntlayerと同じクライアントエントリーポイントからインポートします：

tsx

"use client";

import { useIntlayerAsync } from "next-intlayer";

Next.js App Routerを使用してサーバーコンポーネントとクライアントコンポーネントを分ける場合、インポートファイルの先頭に"use client"を注釈として追加することを確認してください。

パラメータ

key:
タイプ: DictionaryKeys
ローカライズされたコンテンツブロックを識別するために使用される辞書キー。このキーは、コンテンツ宣言ファイルで定義されている必要があります。
locale（オプション）:
タイプ: Locales
対象とする特定のロケール。この値を省略すると、フックはクライアントコンテキストのロケールを使用します。
isRenderEditor（オプション、デフォルトはtrue）:
タイプ: boolean
コンテンツがIntlayerエディタオーバーレイでレンダリングの準備ができているかどうかを決定します。falseに設定すると、返される辞書データにはエディタ特有の機能が含まれません。

戻り値

フックは、keyおよびlocaleでキー付けされたローカライズされたコンテンツを含む辞書オブジェクトを返します。また、現在リモート辞書が取得されているかどうかを示すisLoadingブール値も含まれています。

Next.jsでの使用例

クライアントサイドコンポーネントの例

tsx

"use client";

import { useEffect } from "react";
import { useIntlayerAsync } from "next-intlayer";

export const AsyncClientComponentExample = () => {
  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）のローカライズされた属性値を取得できます：

tsx

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

コンテンツ宣言ファイル

すべてのコンテンツキーは、タイプ安全性を確保し、ランタイムエラーを防ぐために、コンテンツ宣言ファイルで定義されなければなりません。これらのファイルにより、TypeScript検証が可能になり、常に既存のキーとロケールを参照することができます。

コンテンツ宣言ファイルの設定手順はこちらで利用可能です。

さらなる情報

Intlayerビジュアルエディタ:
UIから直接コンテンツを管理および編集するためにIntlayerビジュアルエディタと統合します。詳細はこちらをご覧ください。

要約すると、useIntlayerAsyncは、事前レンダリングされた辞書と非同期辞書更新を組み合わせることによって、ユーザー体験を向上させ、コンテンツの鮮度を維持するために設計された強力なクライアントサイドフックです。isLoadingとTypeScriptベースのコンテンツ宣言を活用することで、Next.jsアプリケーションに動的でローカライズされたコンテンツをシームレスに統合できます。

このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

ドキュメントへのGitHubリンク

useIntlayer useDictionary