Next.js統合: useIntlayerAsyncフックドキュメント

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

概要

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

環境設定

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

Intlayerを始めるには、まずhttps://intlayer.org/dashboardで登録し、アクセストークンを取得する必要があります。資格情報を取得したら、以下のように設定ファイルに追加します:

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プラットフォームを通じた編集が可能になります。

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

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

"use client";import { useIntlayerAsync } from "next-intlayer";

Next.jsのApp Routerでサーバーコンポーネントとクライアントコンポーネントが分離されている場合、インポートするファイルの先頭に"use client"を記述してください。

パラメーター

1. key:
   型: DictionaryKeys
   ローカライズされたコンテンツブロックを識別するために使用される辞書キー。このキーはコンテンツ宣言ファイルで定義する必要があります。

2. locale (オプション):
   型: Locales
   ターゲットとする特定のロケール。省略された場合、フックはクライアントコンテキストのロケールを使用します。

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

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