このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"v8.9.02026/5/4
- "Tanstack Start Solid.js用に追加"v8.5.12026/3/25
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
Intlayerを使用してTanstack Start + Solid.jsウェブサイトを翻訳する | 国際化 (i18n)
目次
このガイドでは、Solid.jsを使用したTanstack Startプロジェクトにおいて、Intlayerを統合してシームレスな国際化、ロケール対応ルーティング、TypeScriptサポート、および現代的な開発手法を実現する方法を説明します。
代替手段ではなく Interlayer を使用する理由
「react-i18next」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
TanStack Start を完全にカバー
Intlayer は、多言語ルーティング、サイトマップ、および国際化の拡張 (i18n) に必要なすべての機能を提供することにより、TanStack Start および Solid と完全に連携するように最適化されています。
バンドルサイズ
大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、バンドルとページのサイズを最大 50% 削減するのに役立ちます。
保守性
アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は完全に型指定されており、コンテンツの正確性を保証します。
AI エージェント
コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツール スイートも付属しています。および エージェント スキル により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
オートメーション
AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する コンパイラー と、バックグラウンドでの翻訳を支援する Web プラットフォーム も提供します。
パフォーマンス
大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
非開発によるスケーリング
Intlayer は単なる i18n ソリューションではなく、自己ホスト型 ビジュアル エディター と 完全な CMS を提供します。 リアルタイムで多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
Tanstack StartアプリケーションでIntlayerをセットアップするためのステップバイステップガイド
GitHubでアプリケーションテンプレートを確認してください。
プロジェクト作成
まず、TanStack Startウェブサイトの新しいプロジェクトを開始ガイドに従って、新しいTanStack Startプロジェクトを作成します。
Intlayerパッケージのインストール
お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
bashコードをコピーコードをクリップボードにコピー
npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer initプロジェクトの構成
アプリケーションの言語を構成するための構成ファイルを作成します：
intlayer.config.tsコードをコピーコードをクリップボードにコピー
import type { IntlayerConfig } from "intlayer";import { Locales } from "intlayer";const config: IntlayerConfig = { internationalization: { defaultLocale: Locales.ENGLISH, locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], },};export default config;この構成ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクト、Cookie名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、構成ドキュメントを参照してください。
Vite構成にIntlayerを統合する
Vite構成にintlayerプラグインを追加します：
vite.config.tsコードをコピーコードをクリップボードにコピー
import { intlayer } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({ plugins: [ devtools(), tanstackStart({ router: { routeFileIgnorePattern: ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$", }, }), solidPlugin({ ssr: true }), intlayer(), ],});intlayer()Viteプラグインは、IntlayerをViteと統合するために使用されます。コンテンツ宣言ファイルの構築を確実にし、開発モードでそれらを監視します。Viteアプリケーション内でIntlayer環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスを提供します。ルートレイアウトの作成
現在選択されているロケールを検出するために
useParamsを使用し、htmlタグにlangおよびdir属性を設定することで、国際化をサポートするようにルートレイアウトを構成します。src/routes/__root.tsxコードをコピーコードをクリップボードにコピー
import { HeadContent, Scripts, createRootRouteWithContext,} from "@tanstack/solid-router";import { HydrationScript } from "solid-js/web";import { Suspense, type ParentComponent } from "solid-js";import { IntlayerProvider } from "solid-intlayer";import { defaultLocale, getHTMLTextDir } from "intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";export const Route = createRootRouteWithContext()({ shellComponent: RootComponent,});const RootComponent: ParentComponent = (props) => { const params = LocaleRoute.useParams(); const locale = params()?.locale ?? defaultLocale; return ( <html dir={getHTMLTextDir(locale)} lang={locale}> <head> <HydrationScript /> <HeadContent /> </head> <body> <IntlayerProvider locale={locale}> <Suspense>{props.children}</Suspense> </IntlayerProvider> <Scripts /> </body> </html> );};ロケールレイアウトの作成
ロケールプレフィックスを処理し、検証を実行するレイアウトを作成します。このレイアウトにより、有効なロケールのみが処理されるようになります。
ルートレベルでロケールプレフィックスを検証する必要がない場合、このステップは任意です。
src/routes/{-$locale}/route.tsxコードをコピーコードをクリップボードにコピー
import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";export const Route = createFileRoute("/{-$locale}")({ beforeLoad: ({ params }) => { const localeParam = params.locale; // ロケールプレフィックスを検証 const { isValid, localePrefix } = validatePrefix(localeParam); if (!isValid) { throw redirect({ to: "/{-$locale}/404", params: { locale: localePrefix }, replace: true, }); } }, component: Outlet,});ここで、
{-$locale}は現在のロケールに置き換えられる動的なルートパラメータです。この表記によりスロットがオプションになり、'prefix-no-default'などのルーティングモードで動作できるようになります。同じルートで複数の動的セグメントを使用している場合 (例:
/{-$locale}/other-path/$anotherDynamicPath/...)、このスロットが問題を引き起こす可能性があることに注意してください。'prefix-all'モードの場合、代わりにスロットを$localeに切り替えることをお勧めします。'no-prefix'または'search-params'モードの場合、スロットを完全に削除できます。コンテンツの宣言
翻訳を保存するためのコンテンツ宣言を作成および管理します：
src/contents/page.content.tsコードをコピーコードをクリップボードにコピー
import type { Dictionary } from "intlayer";import { t } from "intlayer";const appContent = { content: { links: { about: t({ en: "About", es: "Acerca de", fr: "À propos", }), home: t({ en: "Home", es: "Inicio", fr: "Accueil", }), }, meta: { title: t({ en: "Welcome to Intlayer + TanStack Router", es: "Bienvenido a Intlayer + TanStack Router", fr: "Bienvenue à Intlayer + TanStack Router", }), description: t({ en: "This is an example of using Intlayer with TanStack Router", es: "Este es un ejemplo de uso de Intlayer con TanStack Router", fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router", }), }, }, key: "app",} satisfies Dictionary;export default appContent;コンテンツ宣言は、
contentDirディレクトリ (デフォルトは./app) に含まれていれば、アプリケーションのどこにでも定義できます。また、コンテンツ宣言ファイルの拡張子 (デフォルトは.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}) に一致する必要があります。詳細については、コンテンツ宣言のドキュメントを参照してください。
ロケール対応のコンポーネントとフックを利用する
ロケール対応のナビゲーションのために
LocalizedLinkコンポーネントを作成します：src/components/LocalizedLink.tsxコードをコピーコードをクリップボードにコピー
import { Link, type LinkProps } from "@tanstack/solid-router";import { getPrefix } from "intlayer";import { useLocale } from "solid-intlayer";import type { JSX } from "solid-js";export const LOCALE_ROUTE = "{-$locale}" as const;export type RemoveLocaleParam<TVal> = TVal extends string ? RemoveLocaleFromString<TVal> : TVal;export type To = RemoveLocaleParam<LinkProps["to"]>;type CollapseDoubleSlashes<TString extends string> = TString extends `${infer THead}//${infer TTail}` ? CollapseDoubleSlashes<`${THead}/${TTail}`> : TString;export type LocalizedLinkProps = Omit<LinkProps, "to"> & { to?: To;} & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;type RemoveAll< TString extends string, TSub extends string,> = TString extends `${infer THead}${TSub}${infer TTail}` ? RemoveAll<`${THead}${TTail}`, TSub> : TString;type RemoveLocaleFromString<TString extends string> = CollapseDoubleSlashes< RemoveAll<TString, typeof LOCALE_ROUTE>>;export const LocalizedLink = (props: LocalizedLinkProps) => { const { locale } = useLocale(); return ( <Link {...props} params={{ locale: getPrefix(locale()).localePrefix, ...(typeof props.params === "object" ? props.params : {}), }} to={`/${LOCALE_ROUTE}${props.to ?? ""}` as LinkProps["to"]} /> );};このコンポーネントには2つの目的があります：
- URLから不要な
{-$locale}プレフィックスを削除する。 - ユーザーがローカライズされたルートに直接リダイレクトされるように、URLにロケールパラメータを注入する。
次に、プログラムによるナビゲーションのための
useLocalizedNavigateフックを作成します：src/hooks/useLocalizedNavigate.tsxコードをコピーコードをクリップボードにコピー
import { useNavigate } from "@tanstack/solid-router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const useLocalizedNavigate = () => { const navigate = useNavigate(); const { locale } = useLocale(); const localizedNavigate = (to: string) => { const localizedTo = getLocalizedUrl(to, locale()); return navigate({ to: localizedTo }); }; return localizedNavigate;};- URLから不要な
ページでIntlayerを活用する
アプリケーション全体でコンテンツ辞書にアクセスします：
ローカライズされたホームページ
src/routes/{-$locale}/index.tsxコードをコピーコードをクリップボードにコピー
import { createFileRoute } from "@tanstack/solid-router";import { useIntlayer } from "solid-intlayer";import { LocalizedLink } from "@/components/LocalizedLink";export const Route = createFileRoute("/{-$locale}/")({ component: RouteComponent,});function RouteComponent() { const content = useIntlayer("index-page"); return ( <main> <h1>{content.heroTitle}</h1> <p>{content.heroDesc}</p> <div> <LocalizedLink to="/">{content.navHome}</LocalizedLink> <LocalizedLink to="/about">{content.navAbout}</LocalizedLink> </div> </main> );}コンテンツを
alt、title、href、aria-labelなどのstring属性で使用したい場合は、関数の値を使用できます。例：htmlコードをコピーコードをクリップボードにコピー
<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />Solidでは、
useIntlayerはリアクティブなコンテンツ（例：content）を返します。そのプロパティに直接アクセスできます。useIntlayerフックの詳細については、ドキュメントを参照してください。ロケール切り替えコンポーネントの作成
ユーザーが言語を変更できるようにするコンポーネントを作成します：
src/components/LocaleSwitcher.tsxコードをコピーコードをクリップボードにコピー
import { useLocation } from "@tanstack/solid-router";import { getLocaleName, getPathWithoutLocale, getPrefix } from "intlayer";import { For } from "solid-js";import { useIntlayer, useLocale } from "solid-intlayer";import { LocalizedLink, type To } from "./LocalizedLink";export const LocaleSwitcher = () => { const content = useIntlayer("locale-switcher"); const location = useLocation(); const { availableLocales, locale, setLocale } = useLocale(); const pathWithoutLocale = () => getPathWithoutLocale(location().pathname); return ( <div class="flex flex-row gap-2"> <For each={availableLocales}> {(localeEl) => ( <LocalizedLink aria-current={localeEl === locale() ? "page" : undefined} onClick={() => setLocale(localeEl)} params={{ locale: getPrefix(localeEl).localePrefix }} to={pathWithoutLocale() as To} > {getLocaleName(localeEl)} </LocalizedLink> )} </For> </div> );};export default LocaleSwitcher;Solidでは、
useLocaleからのlocaleは シグナルアクセサー です。現在の値をリアクティブに読み取るには、locale()(括弧付き) を使用します。useLocaleフックの詳細については、ドキュメントを参照してください。HTML属性の管理
ステップ 5 で見たように、ルートコンポーネントで
useParamsを使用してhtmlタグのlangおよびdir属性を管理できます。これにより、サーバーとクライアントで正しい属性が設定されるようになります。src/routes/__root.tsxコードをコピーコードをクリップボードにコピー
const RootComponent: ParentComponent = (props) => { const params = LocaleRoute.useParams(); const locale = params()?.locale ?? defaultLocale; return ( <html dir={getHTMLTextDir(locale)} lang={locale}> {/* ... */} </html> );};ミドルウェアの追加
intlayerProxyを使用して、アプリケーションにサーバーサイドのルーティングを追加することもできます。このプラグインはURLに基づいて現在のロケールを自動的に検出し、適切なロケールCookieを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザ言語設定に基づいて最も適切なロケールを決定します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。本番環境で
intlayerProxyを使用するには、vite-intlayerパッケージをdevDependenciesからdependenciesに切り替える必要があることに注意してください。vite.config.tsコードをコピーコードをクリップボードにコピー
import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solid from "vite-plugin-solid";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({ plugins: [ intlayerProxy(), // Nitroを使用する場合、プロキシはサーバーの前に配置する必要があります nitro(), intlayer(), tanstackStart({ router: { routeFileIgnorePattern: ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$", }, }), solid(), ],});メタデータの国際化
ロケール対応のメタデータのために、
headローダー内でgetIntlayer関数を使用してコンテンツ辞書にアクセスすることもできます：src/routes/{-$locale}/index.tsxコードをコピーコードをクリップボードにコピー
import { createFileRoute } from "@tanstack/solid-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({ component: RouteComponent, head: ({ params }) => { const { locale } = params; const path = "/"; // The path for this route const metaContent = getIntlayer("app", locale); return { links: [ // Canonical link: Points to the current localized page { rel: "canonical", href: getLocalizedUrl(path, locale) }, // Hreflang: Tell Google about all localized versions ...localeMap(({ locale: mapLocale }) => ({ rel: "alternate", hrefLang: mapLocale, href: getLocalizedUrl(path, mapLocale), })), // x-default: For users in unmatched languages // Define the default fallback locale (usually your primary language) { rel: "alternate", hrefLang: "x-default", href: getLocalizedUrl(path, defaultLocale), }, ], meta: [ { title: metaContent.title }, { name: "description", content: metaContent.meta.description }, ], }; },});サーバーアクションでロケールを取得する
サーバーアクションやAPIエンドポイント内から現在のロケールにアクセスしたい場合があります。 これを行うには、
intlayerからgetLocaleヘルパーを使用します。TanStack Startのサーバー関数を使用した例を次に示します：
src/routes/{-$locale}/index.tsxコードをコピーコードをクリップボードにコピー
import { createServerFn } from "@tanstack/solid-start";import { getRequestHeader, getRequestHeaders,} from "@tanstack/solid-start/server";import { getCookie, getIntlayer, getLocale } from "intlayer";export const getLocaleServer = createServerFn().handler(async () => { const locale = await getLocale({ // リクエストからCookieを取得する (デフォルト: 'INTLAYER_LOCALE') getCookie: (name) => { const cookieString = getRequestHeader("cookie"); return getCookie(name, cookieString); }, // リクエストからヘッダーを取得する (デフォルト: 'x-intlayer-locale') // Accept-Language ネゴシエーションを使用したフォールバック getHeader: (name) => getRequestHeader(name), }); // getIntlayer() を使用してコンテンツを取得する const content = getIntlayer("app", locale); return { locale, content };});404ページを管理する
ユーザーが存在しないページにアクセスしたときに、カスタム 404 ページを表示できます。ロケールプレフィックスは、404 ページがトリガーされる方法に影響を与える可能性があります。
TanStack Router のロケールプレフィックス付き 404 処理について
TanStack Router では、ローカライズされたルートでの 404 ページの処理に重層的なアプローチが必要です：
- 専用 404 ルート: 404 UI を表示するための特定のルート。
- ルートレベルの検証: ロケールプレフィックスを検証し、無効な場合は 404 にリダイレクトします。
- キャッチオールルート: ロケールセグメント内のあらゆる一致しないパスをキャプチャします。
src/routes/{-$locale}/404.tsxコードをコピーコードをクリップボードにコピー
import { createFileRoute } from "@tanstack/solid-router";// これにより専用の /[locale]/404 ルートが作成されます// 直接のルートとして、また他のファイルでコンポーネントとしてインポートされて使用されますexport const Route = createFileRoute("/{-$locale}/404")({ component: NotFoundComponent,});// notFoundComponent やキャッチオールルートで再利用できるように別途エクスポートexport function NotFoundComponent() { return ( <div> <h1>404</h1> </div> );}src/routes/{-$locale}/route.tsxコードをコピーコードをクリップボードにコピー
import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({ // beforeLoad はルートがレンダリングされる前に実行されます (サーバーとクライアントの両方) // ここはロケールプレフィックスを検証するのに最適な場所です beforeLoad: ({ params }) => { const localeParam = params.locale; // validatePrefix は intlayer 構成に従ってロケールが有効かどうかを確認します const { isValid, localePrefix } = validatePrefix(localeParam); if (!isValid) { // 無効なロケールプレフィックス - 有効なロケールプレフィックスを使用して 404 ページにリダイレクト throw redirect({ to: "/{-$locale}/404", params: { locale: localePrefix }, }); } }, component: Outlet, // notFoundComponent は、子ルートが存在しないときに呼び出されます // 例: /en/non-existent-page は /en レイアウト内でこれをトリガーします notFoundComponent: NotFoundComponent,});src/routes/{-$locale}/$.tsxコードをコピーコードをクリップボードにコピー
import { createFileRoute } from "@tanstack/solid-router";import { NotFoundComponent } from "./404";// $ (スプラット/キャッチオール) ルートは、他のルートに一致しないあらゆるパスに一致します// 例: /en/some/deeply/nested/invalid/path// これにより、ロケール内のすべての不一致パスが 404 ページを表示するようになります// これがないと、一致しない深いパスは空白のページまたはエラーを表示する可能性がありますexport const Route = createFileRoute("/{-$locale}/$")({ component: NotFoundComponent,});コンポーネントのコンテンツを抽出する
オプション既存のコードベースがある場合、数千ものファイルを変換するのは時間がかかる可能性があります。
このプロセスを容易にするために、Intlayerはコンポーネントを変換してコンテンツを抽出するための コンパイラ / エクストラクタ を提案しています。
セットアップするには、
intlayer.config.tsファイルにcompilerセクションを追加します：intlayer.config.tsコードをコピーコードをクリップボードにコピー
import { type IntlayerConfig } from "intlayer"; const config: IntlayerConfig = { // ...構成の残り compiler: { /** * コンパイラを有効にするかどうかを示します。 */ enabled: true, /** * 出力ファイルパスを定義します */ output: ({ fileName, extension }) => `./${fileName}${extension}`, /** * 変換後にコンポーネントを保存するかどうかを示します。 * * - `true` の場合、コンパイラはディスク上のコンポーネントファイルを書き換えます。そのため、変換は永続的になり、コンパイラは次のプロセスでの変換をスキップします。これにより、コンパイラはアプリを変換した後、削除できます。 * * - `false` の場合、コンパイラはビルド出力のコードにのみ `useIntlayer()` 関数呼び出しを注入し、基本コードベースはそのまま維持します。変換はメモリ内でのみ行われます。 */ saveComponents: false, /** * 辞書キーのプレフィックス */ dictionaryKeyPrefix: "", }, }; export default config;エクストラクタを実行して、コンポーネントを変換し、コンテンツを抽出します
bashコードをコピーコードをクリップボードにコピー
npx intlayer extractサイトマップの生成
Intlayer には、アプリケーションのサイトマップを簡単に作成できるサイトマップ ジェネレーターが組み込まれています。ローカライズされたルートを処理し、検索エンジンに必要なメタデータを追加します。
Intlayer によって生成されたサイトマップは、
xhtml:link名前空間 (Hreflang XML Extensions) をサポートしています。生の URL のみを表示するデフォルトのサイトマップ ジェネレーターとは異なり、Intlayer はページのすべての言語バージョン (例:/about、/about?lang=fr、/about?lang=es) 間に必要な双方向リンクを自動的に作成します。これにより、検索エンジンが正しい言語バージョンを正しい対象者に正しくインデックス付けして提供できるようになります。Intlayer によって生成されたサイトマップは、
xhtml:link名前空間 (Hreflang XML Extensions) をサポートしています。生の URL のみを表示するデフォルトのサイトマップ ジェネレーターとは異なり、Intlayer はページのすべての言語バージョン (例:/about、/about?lang=fr、/about?lang=es) 間に必要な双方向リンクを自動的に作成します。これにより、検索エンジンが正しい言語バージョンを正しい対象者に正しくインデックス付けして提供できるようになります。これを使用するには、まず
vite.config.tsを構成して、ローカライズされたルートのプリレンダリングを有効にし、デフォルトの TanStack Start サイトマップ生成を無効にする必要があります。vite.config.tsコードをコピーコードをクリップボードにコピー
import { localeMap, localeFlatMap } from "intlayer";// ... その他のインポートexport const pathList = ["", "/about", "/404"];const localizedPages = localeFlatMap(({ urlPrefix }) => pathList.map((path) => ({ path: `${urlPrefix}${path}`, prerender: { enabled: true, }, })));export default defineConfig({ plugins: [ // ... その他のプラグイン tanstackStart({ // ... その他の設定 sitemap: { enabled: false, }, prerender: { enabled: true, crawlLinks: false, concurrency: 10, }, pages: localizedPages, }), ],});次に、
generateSitemap関数を使用するsrc/routes/sitemap[.]xml.tsルートを作成します。src/routes/sitemap[.]xml.tsコードをコピーコードをクリップボードにコピー
import { createFileRoute } from "@tanstack/solid-router";import { generateSitemap } from "intlayer";const SITE_URL = "http://localhost:3000";export const Route = createFileRoute("/sitemap.xml")({ server: { handlers: { GET: async () => { const sitemap = generateSitemap( [ { path: "/", changefreq: "daily", priority: 1.0 }, { path: "/about", changefreq: "monthly", priority: 0.8 }, ], { siteUrl: SITE_URL } ); return new Response(sitemap, { headers: { "Content-Type": "application/xml" }, }); }, }, },});TypeScriptの構成
Intlayerは、TypeScriptの利点を活用し、コードベースをより強固にするために、モジュール拡張（module augmentation）を使用します。
TypeScript構成に自動生成された型が含まれていることを確認してください：
tsconfig.jsonコードをコピーコードをクリップボードにコピー
{ // ...既存の構成 include: [ // ...既存のインクルード ".intlayer/**/*.ts", // 自動生成された型を含める ],}
Git構成
Intlayerによって生成されたファイルを無視することをお勧めします。これにより、それらをGitリポジトリにコミットすることを避けることができます。
これを行うには、.gitignore ファイルに次の指示を追加します：
コードをクリップボードにコピー
# Intlayerによって生成されたファイルを無視する.intlayerVS Code 拡張機能
Intlayerでの開発体験を向上させるために、公式の Intlayer VS Code 拡張機能 をインストールできます。
この拡張機能は以下を提供します：
- 翻訳キーの オートコンプリート。
- 不足している翻訳の リアルタイムエラー検出。
- 翻訳されたコンテンツの インラインプレビュー。
- 翻訳を簡単に作成および更新するための クイックアクション。
拡張機能の使用方法の詳細については、Intlayer VS Code 拡張機能ドキュメント を参照してください。
さらに進む
さらに進むには、ビジュアルエディタを実装したり、CMSを使用してコンテンツを外部化したりできます。