\n\n
\n\n\n\n{@const Title = $content.title}
\n\n\n\n\n```\n\n> アプリケーションが既に存在する場合は、[Intlayer コンパイラ](/ja/doc/compiler) と [抽出コマンド](/ja/doc/concept/cli/extract) を組み合わせて、1 秒で何千ものコンポーネントを変換できます。\n\n### （オプション）ステップ6: コンテンツの言語を変更する\n\n```svelte fileName=\"src/App.svelte\"\n\n\n\n \n```\n\n#### サーバーサイドルーティングの設定（オプション）\n\n並行して、`intlayerProxy` を使用してアプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインは、URL に基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最適なロケールを判断します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。\n\n> `intlayerProxy` を本番環境で使用するには、`vite-intlayer` パッケージを `devDependencies` から `dependencies` に切り替える必要があることに注意してください。\n\n```typescript {3,7} fileName=\"vite.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { defineConfig } from \"vite\";\nimport { svelte } from \"@sveltejs/vite-plugin-svelte\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\n\ntypescript {3,7} fileName=\"vite.config.ts\" codeFormat=\"typescript\"\nimport { defineConfig } from \"vite\";\nimport { svelte } from \"@sveltejs/vite-plugin-svelte\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [intlayerProxy(), // should be placed first\n svelte(), intlayer()],\n});\n```\n\n### （オプション）ステップ8：ロケールが変更されたときにURLを変更する\n\nユーザーが言語を切り替え、URLをそれに応じて更新できるようにするために、`LocaleSwitcher` コンポーネントを作成できます。このコンポーネントは `intlayer` の `getLocalizedUrl` と `svelte-spa-router` の `push` を使用します。\n\n```svelte fileName=\"src/lib/LocaleSwitcher.svelte\"\n\n\n\n \n\nコンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\n`vite.config.ts` を更新して `intlayerCompiler` プラグインを含めます。\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // コンパイラプラグインを追加します\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # または npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # または pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # または yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n \n\n### （任意）サイトマップと robots.txt（ビルド時生成）\n\nIntlayer は `generateSitemap` と `getMultilingualUrls` により、クローラ向けに整形した多言語の `sitemap.xml` と `robots.txt` を `public/` に自動で書き出せます。通常は Vite より**前**に小さな Node スクリプトを走らせます（例: npm の `predev` / `prebuild`）。\n\n#### サイトマップ\n\nIntlayer のサイトマップ生成はロケール設定を踏まえ、クローラ向けのメタデータを含めます。\n\n> 生成されるサイトマップは `xhtml:link`（hreflang）をサポートします。単純な URL 列挙ではなく、各ページの言語版同士を双方向で結びます（例: `/about`、`/fr/about`、`/about?lang=fr` などルーティングに依存）。\n\n#### Robots.txt\n\n`getMultilingualUrls` で `Disallow` を、機微パスの**すべての言語 URL**に効かせます。\n\n#### 1. プロジェクトルートに `generate-seo.mjs` を置く\n\n```javascript fileName=\"generate-seo.mjs\"\nimport fs from \"fs\";\nimport path from \"path\";\nimport { fileURLToPath } from \"url\";\nimport { generateSitemap, getMultilingualUrls } from \"intlayer\";\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\n\nconst SITE_URL = (process.env.SITE_URL || \"http://localhost:5173\").replace(\n /\\/$/,\n \"\"\n);\n\nconst pathList = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });\nfs.writeFileSync(path.join(__dirname, \"public\", \"sitemap.xml\"), sitemapXml);\n\nconst getAllMultilingualUrls = (urls) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)));\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nconst robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${SITE_URL}/sitemap.xml`,\n].join(\"\\n\");\n\nfs.writeFileSync(path.join(__dirname, \"public\", \"robots.txt\"), robotsTxt);\n\nconsole.log(\"SEO files generated successfully.\");\n```\n\n`intlayer` がインストールされている必要があります。本番では環境変数 `SITE_URL` を設定してください（CI など）。\n\n> Node の ESM では `generate-seo.mjs` を推奨します。`generate-seo.js` にする場合は `package.json` の `\"type\": \"module\"` などで ESM を有効にしてください。\n\n#### 2. Vite より前にスクリプトを実行する\n\n```json fileName=\"package.json\"\n{\n \"scripts\": {\n \"dev\": \"vite\",\n \"prebuild\": \"node generate-seo.mjs\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n }\n}\n```\n\npnpm や yarn を使う場合はコマンドを読み替えてください。CI から呼び出しても構いません。\n\n### さらに進む\n\nさらに進めるために、[ビジュアルエディター](/ja/doc/concept/editor)を実装するか、[CMS](/ja/doc/concept/cms)を使用してコンテンツを外部化することができます。\n","about":"Vite と Svelte のウェブサイトを多言語対応にする方法を紹介します。国際化（i18n）と翻訳のドキュメントに従ってください。","url":"https://intlayer.org/ja/doc/environment/vite-and-svelte","datePublished":"18-04-2025","dateModified":"06-05-2026","keywords":"国際化, ドキュメント, Intlayer, Vite, Svelte, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"開発者、コンテンツマネージャー"}}
1. プロジェクトルートに
{$content.title}
\n\n{@const Title = $content.title}
\n\n\n\n\n```\n\n> アプリケーションが既に存在する場合は、[Intlayer コンパイラ](/ja/doc/compiler) と [抽出コマンド](/ja/doc/concept/cli/extract) を組み合わせて、1 秒で何千ものコンポーネントを変換できます。\n\n### （オプション）ステップ6: コンテンツの言語を変更する\n\n```svelte fileName=\"src/App.svelte\"\n\n\n\n \n
\n```\n\n### （オプション）ステップ7：Markdownのレンダリング\n\nIntlayerは、Markdownコンテンツを直接Svelteアプリケーション内でレンダリングすることをサポートしています。デフォルトでは、Markdownはプレーンテキストとして扱われます。MarkdownをリッチなHTMLに変換するには、`@humanspeak/svelte-markdown`や他のMarkdownパーサーを統合することができます。\n\n> `intlayer`パッケージを使ってMarkdownコンテンツを宣言する方法については、[markdownドキュメント](https://github.com/aymericzip/intlayer/tree/main/docs/docs/ja/dictionary/markdown.md)をご覧ください。\n\n```svelte fileName=\"src/App.svelte\"\n\n\n{$content.markdownContent}
\n```\n\n> `content.markdownContent.metadata.xxx` プロパティを使って、マークダウンのフロントマターのデータにもアクセスできます。\n\n### （オプション）ステップ8: intlayerエディター / CMS のセットアップ\n\nintlayerエディターをセットアップするには、[intlayerエディターのドキュメント](/ja/doc/concept/editor)に従ってください。\n\nintlayer CMSをセットアップするには、[intlayer CMSのドキュメント](/ja/doc/concept/cms)に従ってください。\n\n### （オプション）ステップ7：アプリケーションにローカライズされたルーティングを追加する\n\nSvelteアプリケーションでローカライズされたルーティングを扱うには、`svelte-spa-router`とIntlayerの`localeFlatMap`を組み合わせて、各ロケールのルートを生成できます。\n\nまず、`svelte-spa-router`をインストールします：\n\n```bash packageManager=\"npm\"\nnpm install svelte-spa-router\nnpx intlayer init\n```\n\n```bash packageManager=\"pnpm\"\npnpm add svelte-spa-router\npnpm intlayer init\n```\n\n```bash packageManager=\"yarn\"\nyarn add svelte-spa-router\nyarn intlayer init\n```\n\n```bash packageManager=\"bun\"\nbun add svelte-spa-router\n```\n\n次に、ルートを定義するために `Router.svelte` ファイルを作成します：\n\n```svelte fileName=\"src/Router.svelte\"\n\n\n\n
\n\n \n\n \n
\n```\n\n### Git 設定\n\nIntlayer によって生成されたファイルは無視することを推奨します。これにより、Git リポジトリへの不要なコミットを避けることができます。\n\nこれを行うには、`.gitignore` ファイルに以下の指示を追加してください：\n\n```bash\n# Intlayer によって生成されたファイルを無視する\n.intlayer\n```\n\n### VS Code 拡張機能\n\nIntlayerでの開発体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールできます。\n\n[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nこの拡張機能は以下を提供します：\n\n- 翻訳キーの**オートコンプリート**。\n- 欠落している翻訳の**リアルタイムエラー検出**。\n- 翻訳されたコンテンツの**インラインプレビュー**。\n- 翻訳を簡単に作成・更新できる**クイックアクション**。\n\n拡張機能の使い方の詳細については、[Intlayer VS Code拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。\n\n---\n\n### (オプション) ステップ 1 : コンポーネントのコンテンツを抽出する\n\n既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。\n\nこのプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するための [コンパイラ](/ja/doc/compiler) / [エクストラクタ](/ja/doc/concept/cli/extract) を提案しています。\n\nセットアップするには、`intlayer.config.ts` ファイルに `compiler` セクションを追加します。\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... 他の構成\n compiler: {\n /**\n * コンパイラを有効にするかどうかを指定します。\n */\n enabled: true,\n\n /**\n * 出力ファイルのパスを定義します。\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。\n */\n saveComponents: false,\n\n /**\n * 辞書キーの接頭辞\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n作成:2025-04-18最終更新:2026-05-06
このドキュメントをあなたの好きなAIアシスタントに参照してくださいChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"v8.9.02026/5/4
- "initコマンドを追加"v7.5.92025/12/30
- "ドキュメント更新"v5.5.112025/11/19
- "履歴初期化"v5.5.102025/6/29
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを編集
このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクコピー
ドキュメントのMarkdownをクリップボードにコピー
Intlayer を使って Vite と Svelte のウェブサイトを翻訳する | 国際化（i18n）
目次
Intlayerとは？
Intlayerは、最新のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。
Intlayerを使うことで、以下が可能になります：
- コンポーネントレベルで宣言的な辞書を使い、翻訳を簡単に管理できます。
- メタデータ、ルート、コンテンツを動的にローカライズできます。
- 自動生成される型によりTypeScriptのサポートを確保し、オートコンプリートやエラー検出を向上させます。
- 動的なロケール検出や切り替えなどの高度な機能を利用できます。
ViteとSvelteアプリケーションでIntlayerをセットアップするステップバイステップガイド
GitHubのアプリケーションテンプレートを参照してください。
ステップ1: 依存関係のインストール
npmを使って必要なパッケージをインストールします：
bash
コードをコピー
コードをクリップボードにコピー
npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer initintlayer
svelte-intlayer IntlayerをSvelteアプリケーションと統合するパッケージです。Svelteの国際化のためのコンテキストプロバイダーとフックを提供します。
vite-intlayer IntlayerをViteバンドラーと統合するためのViteプラグイン、およびユーザーの優先ロケール検出、クッキー管理、URLリダイレクト処理のためのミドルウェアを含みます。
ステップ2: プロジェクトの設定
アプリケーションの言語を設定するための設定ファイルを作成します：
intlayer.config.ts
コードをコピー
コードをクリップボードにコピー
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: Vite設定にIntlayerを統合する
intlayerプラグインを設定に追加します。
vite.config.ts
コードをコピー
コードをクリップボードにコピー
import { defineConfig } from "vite";import { svelte } from "@sveltejs/vite-plugin-svelte";import { intlayer } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({ plugins: [svelte(), intlayer()],});intlayer() Viteプラグインは、IntlayerをViteに統合するために使用されます。これにより、コンテンツ宣言ファイルのビルドが保証され、開発モードでの監視が行われます。また、Viteアプリケーション内でIntlayerの環境変数を定義します。さらに、パフォーマンス最適化のためのエイリアスも提供します。ステップ4: コンテンツの宣言
翻訳を格納するためのコンテンツ宣言を作成および管理します。
src/app.content.tsx
コードをコピー
コードをクリップボードにコピー
import { t, type Dictionary } from "intlayer";
const appContent = {
key: "app",
content: {
title: t({
en: "Hello World",
fr: "Bonjour le monde",
es: "Hola mundo",
}),
},
} satisfies Dictionary;
export default appContent;コンテンツ宣言は、アプリケーション内のどこにでも定義できます。contentDirディレクトリ（デフォルトは./src）に含まれていれば有効です。また、コンテンツ宣言ファイルの拡張子（デフォルトは.content.{json,ts,tsx,js,jsx,mjs,cjs}）に一致する必要があります。
詳細については、コンテンツ宣言のドキュメントを参照してください。
ステップ5: コード内でIntlayerを利用する
src/App.svelte
コードをコピー
コードをクリップボードにコピー
<script> import { useIntlayer } from "svelte-intlayer"; const content = useIntlayer("app");</script><div><!-- コンテンツをシンプルにレンダリング --><h1>{$content.title}</h1><!-- エディターを使って編集可能なコンテンツとしてレンダリング --><h1>{@const Title = $content.title}<Title /></h1><!-- コンテンツを文字列としてレンダリング --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>アプリケーションが既に存在する場合は、Intlayer コンパイラ と 抽出コマンド を組み合わせて、1 秒で何千ものコンポーネントを変換できます。
（オプション）ステップ6: コンテンツの言語を変更する
src/App.svelte
コードをコピー
コードをクリップボードにコピー
<script lang="ts">import { getLocaleName } from 'intlayer';import { useLocale } from "svelte-intlayer";// ロケール情報と setLocale 関数を取得const { locale, availableLocales, setLocale } = useLocale();// ロケール変更を処理const changeLocale = (event: Event) => { const target = event.target as HTMLSelectElement; const newLocale = target.value; setLocale(newLocale);};</script><div> <select value={$locale} on:change={changeLocale}> {#each availableLocales ?? [] as loc} <option value={loc}> {getLocaleName(loc)} </option> {/each} </select></div>（オプション）ステップ7：Markdownのレンダリング
Intlayerは、Markdownコンテンツを直接Svelteアプリケーション内でレンダリングすることをサポートしています。デフォルトでは、Markdownはプレーンテキストとして扱われます。MarkdownをリッチなHTMLに変換するには、@humanspeak/svelte-markdownや他のMarkdownパーサーを統合することができます。
intlayerパッケージを使ってMarkdownコンテンツを宣言する方法については、markdownドキュメントをご覧ください。src/App.svelte
コードをコピー
コードをクリップボードにコピー
<script> import { setIntlayerMarkdown } from "svelte-intlayer"; setIntlayerMarkdown((markdown) => // マークダウンコンテンツを文字列としてレンダリングする return markdown; );</script><h1>{$content.markdownContent}</h1>content.markdownContent.metadata.xxx プロパティを使って、マークダウンのフロントマターのデータにもアクセスできます。（オプション）ステップ8: intlayerエディター / CMS のセットアップ
intlayerエディターをセットアップするには、intlayerエディターのドキュメントに従ってください。
intlayer CMSをセットアップするには、intlayer CMSのドキュメントに従ってください。
（オプション）ステップ7：アプリケーションにローカライズされたルーティングを追加する
Svelteアプリケーションでローカライズされたルーティングを扱うには、svelte-spa-routerとIntlayerのlocaleFlatMapを組み合わせて、各ロケールのルートを生成できます。
まず、svelte-spa-routerをインストールします：
bash
コードをコピー
コードをクリップボードにコピー
npm install svelte-spa-routernpx intlayer init次に、ルートを定義するために Router.svelte ファイルを作成します：
src/Router.svelte
コードをコピー
コードをクリップボードにコピー
<script lang="ts">import { localeFlatMap } from "intlayer";import Router from "svelte-spa-router";import { wrap } from "svelte-spa-router/wrap";import App from "./App.svelte";const routes = Object.fromEntries( localeFlatMap(({locale, urlPrefix}) => [ [ urlPrefix || '/', wrap({ component: App as any, props: { locale, }, }), ], ]));</script><Router {routes} />main.ts を更新して、App の代わりに Router コンポーネントをマウントします：
src/main.ts
コードをコピー
コードをクリップボードにコピー
import { mount } from "svelte";import Router from "./Router.svelte";const app = mount(Router, {typescript fileName="src/main.ts"import { mount } from "svelte";import Router from "./Router.svelte";const app = mount(Router, { target: document.getElementById("app")!, // アプリのマウント先のDOM要素});export default app;最後に、App.svelte を更新して locale プロパティを受け取り、useIntlayer と共に使用します:
src/App.svelte
コードをコピー
コードをクリップボードにコピー
<script lang="ts">import type { Locale } from 'intlayer';import { useIntlayer } from "svelte-intlayer";import Counter from './lib/Counter.svelte';import LocaleSwitcher from './lib/LocaleSwitcher.svelte';export let locale: Locale; // ロケールを受け取る$: content = useIntlayer('app', locale); // ロケールに基づくコンテンツを取得</script><main> <div class="locale-switcher-container"> <LocaleSwitcher currentLocale={locale} /> <!-- 現在のロケールを渡す --> </div> <!-- ... アプリの残りの部分 ... --></main>サーバーサイドルーティングの設定（オプション）
並行して、intlayerProxy を使用してアプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインは、URL に基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最適なロケールを判断します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
intlayerProxyを本番環境で使用するには、vite-intlayerパッケージをdevDependenciesからdependenciesに切り替える必要があることに注意してください。
vite.config.ts
コードをコピー
コードをクリップボードにコピー
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { intlayer, intlayerProxy } from "vite-intlayer";
typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { intlayer, intlayerProxy } from "vite-intlayer";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [intlayerProxy(), // should be placed first
svelte(), intlayer()],
});（オプション）ステップ8：ロケールが変更されたときにURLを変更する
ユーザーが言語を切り替え、URLをそれに応じて更新できるようにするために、LocaleSwitcher コンポーネントを作成できます。このコンポーネントは intlayer の getLocalizedUrl と svelte-spa-router の push を使用します。
src/lib/LocaleSwitcher.svelte
コードをコピー
コードをクリップボードにコピー
<script lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";import { push } from "svelte-spa-router";export let currentLocale: string | undefined = undefined;// ロケール情報を取得const { locale, availableLocales } = useLocale();// ロケール変更を処理const changeLocale = (event: Event) => { const target = event.target as HTMLSelectElement; const newLocale = target.value; const currentUrl = window.location.pathname; const url = getLocalizedUrl( currentUrl, newLocale); push(url);};</script><div class="locale-switcher"> <select value={currentLocale ?? $locale} onchange={changeLocale}> {#each availableLocales ?? [] as loc} <option value={loc}> {getLocaleName(loc)} </option> {/each} </select></div>Git 設定
Intlayer によって生成されたファイルは無視することを推奨します。これにより、Git リポジトリへの不要なコミットを避けることができます。
これを行うには、.gitignore ファイルに以下の指示を追加してください：
bash
コードをコピー
コードをクリップボードにコピー
# Intlayer によって生成されたファイルを無視する.intlayerVS Code 拡張機能
Intlayerでの開発体験を向上させるために、公式のIntlayer VS Code拡張機能をインストールできます。
この拡張機能は以下を提供します：
- 翻訳キーのオートコンプリート。
- 欠落している翻訳のリアルタイムエラー検出。
- 翻訳されたコンテンツのインラインプレビュー。
- 翻訳を簡単に作成・更新できるクイックアクション。
拡張機能の使い方の詳細については、Intlayer VS Code拡張機能のドキュメントを参照してください。
(オプション) ステップ 1 : コンポーネントのコンテンツを抽出する
既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
このプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するための コンパイラ / エクストラクタ を提案しています。
セットアップするには、intlayer.config.ts ファイルに compiler セクションを追加します。
intlayer.config.ts
コードをコピー
コードをクリップボードにコピー
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... 他の構成
compiler: {
/**
* コンパイラを有効にするかどうかを指定します。
*/
enabled: true,
/**
* 出力ファイルのパスを定義します。
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
*/
saveComponents: false,
/**
* 辞書キーの接頭辞
*/
dictionaryKeyPrefix: "",
},
};
export default config;コンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します
bash
コードをコピー
コードをクリップボードにコピー
npx intlayer extract（任意）サイトマップと robots.txt（ビルド時生成）
Intlayer は generateSitemap と getMultilingualUrls により、クローラ向けに整形した多言語の sitemap.xml と robots.txt を public/ に自動で書き出せます。通常は Vite より前に小さな Node スクリプトを走らせます（例: npm の predev / prebuild）。
サイトマップ
Intlayer のサイトマップ生成はロケール設定を踏まえ、クローラ向けのメタデータを含めます。
生成されるサイトマップはxhtml:link（hreflang）をサポートします。単純な URL 列挙ではなく、各ページの言語版同士を双方向で結びます（例:/about、/fr/about、/about?lang=frなどルーティングに依存）。
Robots.txt
getMultilingualUrls で Disallow を、機微パスのすべての言語 URLに効かせます。
1. プロジェクトルートに generate-seo.mjs を置く
generate-seo.mjs
コードをコピー
コードをクリップボードにコピー
import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace( /\/$/, "");const pathList = [ { path: "/", changefreq: "daily", priority: 1.0 }, { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) => urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [ "User-agent: *", "Allow: /", ...disallowedPaths.map((path) => `Disallow: ${path}`), "", `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");intlayer がインストールされている必要があります。本番では環境変数 SITE_URL を設定してください（CI など）。
Node の ESM ではgenerate-seo.mjsを推奨します。generate-seo.jsにする場合はpackage.jsonの"type": "module"などで ESM を有効にしてください。
2. Vite より前にスクリプトを実行する
package.json
コードをコピー
コードをクリップボードにコピー
{ "scripts": { "dev": "vite", "prebuild": "node generate-seo.mjs", "build": "vite build", "preview": "vite preview" }}pnpm や yarn を使う場合はコマンドを読み替えてください。CI から呼び出しても構いません。
さらに進む
さらに進めるために、ビジュアルエディターを実装するか、CMSを使用してコンテンツを外部化することができます。