このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"v8.9.02026/5/4
- "履歴初期化"v5.5.102025/6/29
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
Next.js 統合: useIntlayer フック ドキュメント
useIntlayer フックは、Next.js アプリケーション向けに設計されており、ローカライズされたコンテンツを効率的に取得および管理します。このドキュメントでは、Next.js プロジェクト内でのフックの利用方法に焦点を当て、適切なローカリゼーションの実践を保証します。
Next.js での useIntlayer のインポート
Next.js アプリケーションでクライアントサイドコンポーネントまたはサーバーサイドコンポーネントのどちらを扱っているかに応じて、useIntlayer フックを以下のようにインポートできます。
クライアントコンポーネント:
typescriptコードをコピーコードをクリップボードにコピー
import { useIntlayer } from "next-intlayer"; // クライアントサイドコンポーネントで使用サーバーコンポーネント:
tsxコードをコピーコードをクリップボードにコピー
import { useIntlayer } from "next-intlayer/server"; // サーバーサイドコンポーネントで使用
パラメーター
key: 取得したいコンテンツの辞書キーを識別する文字列。locale（省略可能）: 使用する特定のロケール。省略した場合、フックはクライアントまたはサーバーのコンテキストで設定されたロケールをデフォルトで使用します。
辞書ファイル
すべてのコンテンツキーがコンテンツ宣言ファイル内で定義されていることは、ランタイムエラーを防ぎ、型の安全性を確保するために非常に重要です。この方法は、コンパイル時の検証のためにTypeScriptとの統合も容易にします。
コンテンツ宣言ファイルの設定手順はこちらで確認できます。
Next.jsでの使用例
以下は、Next.jsのページ内でuseIntlayerフックを実装し、アプリケーションの現在のロケールに基づいてローカライズされたコンテンツを動的に読み込む方法です。
コードをクリップボードにコピー
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ビジュアルエディター: より簡単なコンテンツ管理のためのビジュアルエディターの使い方はこちらをご覧ください。
このドキュメントは、Next.js環境内でのuseIntlayerフックの使用方法を説明しており、Next.jsアプリケーション全体でのローカリゼーション管理に強力なソリューションを提供します。