このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"v8.9.02026/5/4
- "initコマンドの追加"v7.5.92025/12/30
- "Astro統合、設定、使用方法の更新"v6.2.02025/10/3
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
Intlayerを使用したAstroサイトの翻訳 | 国際化 (i18n)
目次
Intlayerとは？
Intlayerは、現代的なウェブアプリケーションでの多言語サポートを簡素化するために設計された、革新的でオープンソースの国際化 (i18n) ライブラリです。
Intlayerを使用すると、以下のことが可能になります：
- 翻訳の管理が容易：コンポーネントレベルの宣言型辞書を使用します。
- 動的なローカライズ：メタデータ、ルート、コンテンツを動的にローカライズできます。
- TypeScriptのサポート：自動生成された型により、オートコンプリートやエラー検出が向上します。
- 高度な機能：動的なロケール検出や切り替えなどの機能を利用できます。
AstroへのIntlayer設定ステップバイステップガイド
GitHubでアプリケーションテンプレートを表示。
ステップ1: 依存関係のインストール
お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
コードをクリップボードにコピー
npm install intlayer astro-intlayer# オプション: Reactアイランドのサポートを追加する場合npm install react react-dom react-intlayer @astrojs/reactintlayer 設定管理、翻訳、コンテンツ宣言、トランスパイル、およびCLIコマンドのための国際化ツールを提供するコアパッケージ。
astro-intlayer IntlayerをViteバンドラーと統合するためのAstro統合プラグイン、およびユーザーの優先ロケールの検出、クッキーの管理、URLリダイレクトの処理を行うミドルウェアが含まれています。
ステップ2: プロジェクトの設定
アプリケーションの言語を設定するための設定ファイルを作成します：
コードをクリップボードにコピー
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // その他のロケール ], defaultLocale: Locales.ENGLISH, },};export default config;この設定ファイルを使用して、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの全リストについては、設定ドキュメントを参照してください。
ステップ3: Astro設定へのIntlayerの統合
Astroの設定にintlayerプラグインを追加します。
コードをクリップボードにコピー
// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({ integrations: [intlayer()],});Astro統合プラグイン intlayer() は、IntlayerをAstroと統合するために使用されます。コンテンツ宣言ファイルの構築を確実にし、開発モードで監視します。Astroアプリケーション内でIntlayerの環境変数を定義し、パフォーマンス最適化のためのエイリアスを提供します。
ステップ4: コンテンツの宣言
翻訳を保存するためのコンテンツ宣言を作成・管理します：
コードをクリップボードにコピー
import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = { key: "app", content: { title: t({ en: "Hello World", fr: "Bonjour le monde", es: "Hola mundo", ja: "こんにちは世界", }), },} satisfies Dictionary;export default appContent;コンテンツ宣言は、contentDir（デフォルトは./src）に含まれ、コンテンツ宣言ファイルの拡張子（デフォルトは.content.{json,ts,tsx,js,jsx,mjs,cjs}）と一致していれば、アプリケーション内のどこにでも定義できます。
詳細については、コンテンツ宣言のドキュメントを参照してください。
ステップ5: Astroでのコンテンツの使用
intlayerからエクスポートされたコアヘルパーを使用して、.astroファイル内で直接辞書を消費できます。
コードをクリップボードにコピー
---import { getIntlayer, getLocaleFromPath, getLocalizedUrl, defaultLocale, localeMap, getHTMLTextDir, type LocalesValues,} from "intlayer";import LocaleSwitcher from "../components/LocaleSwitcher.astro";// Get the current locale from the URL (e.g. /es/about -> 'es')const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;// Get the content for the 'app' dictionaryconst { title } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <title>{title}</title> <!-- Canonical link: Tells search engines which is the primary version of this page --> <link rel="canonical" href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)} /> <!-- Hreflang: Tell Google about all localized versions --> { localeMap(({ locale: mapLocale }) => ( <link rel="alternate" hreflang={mapLocale} href={new URL( getLocalizedUrl(Astro.url.pathname, mapLocale), Astro.site )} /> )) } <!-- x-default: Fallback for users in unmatched languages --> <link rel="alternate" hreflang="x-default" href={new URL( getLocalizedUrl(Astro.url.pathname, defaultLocale), Astro.site )} /> </head> <body> <header> <LocaleSwitcher /> </header> <main> <h1>{title}</h1> </main> </body></html>ステップ6: ローカライズされたルーティング
ローカライズされたページを提供するための動的なルートセグメントを作成します（例：src/pages/[locale]/index.astro）：
コードをクリップボードにコピー
<!-- astro -->---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>Astro統合により、開発中に言語認識ルーティングや環境定義を支援するViteミドルウェアが追加されます。独自のロジックや intlayer の getLocalizedUrl などのユーティリティを使用して、言語間のリンクを作成することもできます。
ステップ7: お好みのフレームワークの使用を続ける
お好みのフレームワークを使用してアプリケーションを構築し続けましょう。
- Intlayer + React: Intlayer with React
- Intlayer + Vue: Intlayer with Vue
- Intlayer + Svelte: Intlayer with Svelte
- Intlayer + Solid: Intlayer with Solid
- Intlayer + Preact: Intlayer with Preact
TypeScriptの設定
Intlayerはモジュール拡張（module augmentation）を使用してTypeScriptの利点を活かし、コードベースをより堅牢にします。
TypeScriptの設定に自動生成された型が含まれていることを確認してください。
コードをクリップボードにコピー
{ // ... 既存のTypeScript設定 "include": [ // ... 既存のTypeScript設定 ".intlayer/**/*.ts", // 自動生成された型を含める ],}Gitの設定
Intlayerによって生成されたファイルを無視することをお勧めします。これにより、それらをGitリポジトリにコミットすることを避けることができます。
そのためには、.gitignoreファイルに以下の指示を追加してください：
コードをクリップボードにコピー
# Intlayerによって生成されたファイルを無視.intlayerVS Code拡張機能
Intlayerを使用した開発体験を向上させるために、公式のIntlayer VS Code拡張機能をインストールできます。
この拡張機能は以下を提供します：
- 翻訳キーのオートコンプリート。
- 欠落している翻訳のリアルタイムエラー検出。
- 翻訳されたコンテンツのインラインプレビュー。
- 翻訳を簡単に作成・更新するためのクイックアクション。
拡張機能の使用方法の詳細については、Intlayer VS Code拡張機能のドキュメントを参照してください。
(Optional) Step 15: Extract the content of your components
If you have an existing codebase, transforming thousands of files can be time-consuming.
To ease this process, Intlayer propose a compiler / extractor to transform your components and extract the content.
To set it up, you can add a compiler section in your intlayer.config.ts file:
コードをクリップボードにコピー
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... Rest of your config
compiler: {
/**
* Indicates if the compiler should be enabled.
*/
enabled: true,
/**
* Defines the output files path
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* Indicates if the components should be saved after being transformed.
*
* - If `true`, the compiler will rewrite the component file in the disk. So the transformation will be permanent, and the compiler will skip the transformation for the next process. That way, the compiler can transform the app, and then it can be removed.
*
* - If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. The transformation will be done only in memory.
*/
saveComponents: false,
/**
* Dictionary key prefix
*/
dictionaryKeyPrefix: "",
},
};
export default config;Run the extractor to transform your components and extract the content
コードをクリップボードにコピー
npx intlayer extractさらに詳しく
さらに詳しく知りたい場合は、ビジュアルエディターを実装したり、CMSを使用してコンテンツを外部化したりすることもできます。