このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
Intlayer MCPサーバーを統合することで、ChatGPT、DeepSeek、Cursor、VSCodeなどから直接ドキュメントを取得できます。
MCPサーバーのドキュメントを表示このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
ドキュメント: next-intlayer の t 関数
next-intlayer パッケージの t 関数は、Next.js アプリケーション内でのインライン国際化の基本的なツールです。コンポーネント内で直接翻訳を定義できるため、現在のロケールに基づいたローカライズされたコンテンツを簡単に表示できます。
概要
t 関数は、コンポーネント内で異なるロケールの翻訳を直接提供するために使用されます。サポートされている各ロケールの翻訳を含むオブジェクトを渡すことで、Next.js アプリケーションの現在のロケールコンテキストに基づいて適切な翻訳を返します。
主な特徴
- インライン翻訳: 別途コンテンツ宣言を必要としない、素早くインラインでテキストを表示するのに最適です。
- 自動ロケール選択: 現在のロケールに対応する翻訳を自動的に返します。
- TypeScript サポート: TypeScript 使用時に型安全性とオートコンプリートを提供します。
- 簡単な統合: Next.js のクライアントコンポーネントとサーバーコンポーネントの両方でシームレスに動作します。
関数シグネチャ
コードをクリップボードにコピー
t<T extends string>(content: Record<LocalesValues, T>, locale?: Locales): string
パラメータ
- translations: キーがロケールコード(例: en, fr, es)、値が対応する翻訳文字列のオブジェクト。
戻り値
- 現在のロケールに対応する翻訳済みコンテンツの文字列。
使用例
クライアントコンポーネントでの t の使用
'use client'; ディレクティブをクライアントサイドコンポーネントで t を使用する際には、コンポーネントファイルの先頭に必ず含めてください。
コードをクリップボードにコピー
"use client";import type { FC } from "react";import { t } from "next-intlayer";export const ClientComponentExample: FC = () => ( <p> {t({ en: "This is the content of a client component example", fr: "Ceci est le contenu d'un exemple de composant client", es: "Este es el contenido d un ejemplo de componente cliente", })} </p>);
サーバーコンポーネントでの t の使用
コードをクリップボードにコピー
import type { FC } from "react";import { t } from "next-intlayer/server";export const ServerComponentExample: FC = () => ( <p> {t({ en: "This is the content of a server component example", fr: "Ceci est le contenu d'un exemple de composant serveur", es: "Este es el contenido de un ejemplo de componente servidor", })} </p>);
属性内のインライン翻訳
t 関数は、JSX属性内のインライン翻訳に特に便利です。 alt、title、href、aria-label のような属性をローカライズする際に、属性内で直接 t を使用できます。
コードをクリップボードにコピー
<button aria-label={t({ en: "Submit", fr: "Soumettre", es: "Enviar", })}> {t({ en: "Submit", fr: "Soumettre", es: "Enviar", })} <img src="/path/to/image" alt={t({ en: "A beautiful scenery", fr: "Un beau paysage", es: "Un hermoso paisaje", })} /></button>
高度なトピック
TypeScript 統合
t 関数は TypeScript と共に使用すると型安全であり、必要なすべてのロケールが提供されていることを保証します。
コードをクリップボードにコピー
typescript;import type { IConfigLocales } from "intlayer";import { t } from "next-intlayer";const translations: IConfigLocales<string> = { en: "Welcome", fr: "Bienvenue", es: "Bienvenido",};const greeting = t(translations);
ロケール検出とコンテキスト
next-intlayer では、現在のロケールはコンテキストプロバイダーである IntlayerClientProvider と IntlayerServerProvider を通じて管理されます。これらのプロバイダーがコンポーネントをラップし、locale プロパティが正しく渡されていることを確認してください。
例:
コードをクリップボードにコピー
import type { FC } from "react";import type { Locales } from "intlayer";import { IntlayerClientProvider } from "next-intlayer";import { IntlayerServerProvider } from "next-intlayer/server";const Page: FC<{ locale: Locales }> = ({ locale }) => ( <IntlayerServerProvider locale={locale}> <IntlayerClientProvider locale={locale}> {/* ここにコンポーネントを配置 */} </IntlayerClientProvider> </IntlayerServerProvider>);
よくあるエラーとトラブルシューティング
t が未定義または誤った翻訳を返す場合
- 原因: 現在のロケールが正しく設定されていないか、現在のロケールの翻訳が存在しない。
- 解決策:
- IntlayerClientProvider または IntlayerServerProvider が適切な locale で正しく設定されていることを確認してください。
- 翻訳オブジェクトに必要なすべてのロケールが含まれていることを確認してください。
TypeScriptでの翻訳の欠落
- 原因: 翻訳オブジェクトが必要なロケールを満たしておらず、TypeScriptのエラーが発生する。
- 解決策: IConfigLocales 型を使用して翻訳の完全性を強制してください。
コードをクリップボードにコピー
const translations: IConfigLocales<string> = { en: "Text", fr: "Texte", // es: 'Texto', // 'es'が欠落しているとTypeScriptエラーが発生します [!code error]};const text = t(translations);
効果的な使用のためのヒント
- シンプルなインライン翻訳には t を使用する: コンポーネント内で小さなテキストを直接翻訳するのに最適です。
- 構造化されたコンテンツには useIntlayer を推奨:より複雑な翻訳やコンテンツの再利用には、宣言ファイルでコンテンツを定義し、useIntlayer を使用してください。
- 一貫したロケールの提供:適切なプロバイダーを通じて、アプリケーション全体でロケールが一貫して提供されていることを確認してください。
- TypeScript を活用:TypeScript の型を利用して、翻訳の欠落を検出し、型の安全性を確保しましょう。
結論
next-intlayer の t 関数は、Next.js アプリケーション内でインライン翻訳を管理するための強力で便利なツールです。これを効果的に統合することで、アプリの国際化機能が向上し、世界中のユーザーにより良い体験を提供できます。
より詳細な使用方法や高度な機能については、next-intlayer ドキュメントを参照してください。
注意: IntlayerClientProvider と IntlayerServerProvider を適切に設定し、現在のロケールがコンポーネントに正しく渡されるようにしてください。これは、t 関数が正しい翻訳を返すために非常に重要です。
ドキュメント履歴
- 5.5.10 - 2025-06-29: 履歴の初期化