このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見る翻訳
翻訳の定義
intlayer の t 関数を使うと、複数言語でコンテンツを宣言できます。この関数は型安全性を保証し、翻訳が欠けている場合にエラーを発生させます。これは特に TypeScript 環境で役立ちます。
以下は翻訳付きのコンテンツを宣言する例です。
**/*.content.ts
import { t, type Dictionary } from "intlayer";interface Content { welcomeMessage: string;}export default { key: "multi_lang", content: { welcomeMessage: t({ en: "Welcome to our application", fr: "Bienvenue dans notre application", es: "Bienvenido a nuestra aplicación", }), },} satisfies Dictionary<Content>;
ロケールの設定
適切な翻訳処理を行うために、intlayer.config.tsで受け入れるロケールを設定できます。この設定により、アプリケーションがサポートする言語を定義できます。
intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], },};export default config;
ロケールの設定
適切な翻訳処理を確実にするために、intlayer.config.tsで受け入れるロケールを設定できます。この設定により、アプリケーションがサポートする言語を定義できます。
intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], },};export default config;
Reactコンポーネントでの翻訳の使用
react-intlayerを使用すると、Reactコンポーネント内で翻訳を利用できます。以下はその例です:
**/*.tsx
import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => { const content = useIntlayer("multi_lang"); return ( <div> <p>{content.welcomeMessage}</p> </div> );};export default MyComponent;
このコンポーネントは、アプリケーションで設定された現在のロケールに基づいて対応する翻訳を取得します。
カスタムコンテンツオブジェクト
intlayerは、翻訳のためのカスタムコンテンツオブジェクトをサポートしており、より複雑な構造を定義しつつ型安全性を確保できます。以下はカスタムオブジェクトの例です:
**/*.content.ts
import { t, type Dictionary } from "intlayer";interface ICustomContent { title: string; content: string;}const customContent = { key: "custom_content", content: { profileText: t<ICustomContent>({ en: { title: "Page Title", content: "Page Content", }, fr: { title: "Titre de la Page", content: "Contenu de la Page", }, es: { title: "Título de la Página", content: "Contenido de la Página", }, }), },} satisfies Dictionary<ICustomContent>;
このコンポーネントは、アプリケーションで設定された現在のロケールに基づいて対応する翻訳を取得します。
カスタムコンテンツオブジェクト
intlayer は、翻訳のためのカスタムコンテンツオブジェクトをサポートしており、より複雑な構造を定義しつつ型安全性を確保できます。以下はカスタムオブジェクトの例です:
**/*.content.ts
import { t, type Dictionary } from "intlayer";interface ICustomContent { title: string; content: string;}const customContent = { key: "custom_content", content: { profileText: t<ICustomContent>({ en: { title: "Page Title", content: "Page Content", }, fr: { title: "Titre de la Page", content: "Contenu de la Page", }, es: { title: "Título de la Página", content: "Contenido de la Página", }, }), },} satisfies Dictionary;export default customContent;
ドキュメント履歴
- 5.5.10 - 2025-06-29: 初期履歴
このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンク