このページのコンテンツはAIを使用して翻訳されました。

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フックを実装し、アプリケーションの現在のロケールに基づいてローカライズされたコンテンツを動的に読み込む方法です。

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ビジュアルエディター: より簡単なコンテンツ管理のためのビジュアルエディターの使い方はこちらをご覧ください。

このドキュメントは、Next.js環境内でのuseIntlayerフックの使用方法を説明しており、Next.jsアプリケーション全体でのローカリゼーション管理に強力なソリューションを提供します。

ドキュメント履歴

5.5.10 - 2025-06-29: 履歴初期化

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

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

始める

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