\n\n ```\n\n \n \n \n ```tsx\n import { useRewriteURL } from \"solid-intlayer\";\n\n const Layout = (props) => {\n useRewriteURL();\n return <>{props.children};\n };\n ```\n\n \n \n \n ```svelte\n \n\n ```\n\n \n\n\n## ルーター統合とプロキシ\n\nIntlayer のサーバーサイドプロキシ（Vite と Next.js）は、SEO の一貫性を確保するためにカスタムリライトを自動的に処理します。\n\n1. **内部リライト**: ユーザーが `/fr/a-propos` にアクセスした場合、プロキシは内部的にそれを `/fr/about` にマッピングして、フレームワークが正しいルートに一致するようにします。\n2. **正規化リダイレクト**: ユーザーが手動で `/fr/about` と入力した場合、プロキシは `/fr/a-propos` へ 301/302 リダイレクトを発行し、検索エンジンがページの単一のバージョンのみをインデックスするようにします。\n\n### Next.js 統合\n\nNext.js との統合は `intlayerProxy` ミドルウェアで完全に処理されます。\n\n```typescript fileName=\"middleware.ts\"\nimport { intlayerProxy } from \"next-intlayer/middleware\";\nimport { NextRequest } from \"next/server\";\n\nexport function middleware(request: NextRequest) {\n return intlayerProxy(request);\n}\n```\n\n### Vite 統合\n\nSolidJS、Vue、Svelte 向けに、開発中のリライトは `intlayerProxy` Vite プラグインが管理します。\n\n```typescript fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayerProxy } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [intlayerProxy()],\n});\n```\n\n## 主要機能\n\n### 1. マルチコンテキスト・リライト\n\n各フォーマッタは、異なる利用先向けの特殊化されたルールを含む `RewriteObject` を生成します:\n\n- `url`: クライアント側の URL 生成に最適化（ロケールセグメントを取り除く）。\n- `nextjs`: Next.js のミドルウェア向けに `[locale]` を保持。\n- `vite`: Vite プロキシ向けに `:locale` を保持。\n\n### 2. 自動パターン正規化\n\nIntlayer は内部ですべてのパターン構文（例: `[param]` を `:param` に変換するなど）を正規化し、ソースフレームワークに関係なくマッチングが一貫するようにします。\n\n### 3. SEO の正規 URL\n\n正規パスから見やすいエイリアスへのリダイレクトを強制することで、Intlayer は重複コンテンツの問題を防ぎ、サイトの発見性を向上させます。\n\n## コアユーティリティ\n\n- `getLocalizedUrl(url, locale)`: リライトルールを尊重してローカライズされた URL を生成します。\n- `getCanonicalPath(path, locale)`: ローカライズされた URL を内部の正規パスに解決します。\n- `getRewritePath(pathname, locale)`: パス名がより見やすいローカライズ済みエイリアスに修正される必要があるかどうかを検出します。\n","about":"Intlayerでロケール固有のパスを定義するためのカスタムURLリライトの設定と使用方法を学びます。","url":"https://intlayer.org/ja/doc/concept/custom_url_rewrites","datePublished":"13-08-2024","dateModified":"26-01-2026","keywords":"カスタムURLリライト, ルーティング, 国際化, i18n","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"開発者、コンテンツマネージャー"}}クライアント側のURL修正:
作成:2024-08-13最終更新:2026-01-26
このドキュメントをあなたの好きなAIアシスタントに参照してくださいChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "フレームワーク固有のフォーマッターと useRewriteURL フックの使用を伴う集中型URLリライトを実装しました。"v8.0.02026/1/25
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを編集
このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクコピー
ドキュメントのMarkdownをクリップボードにコピー
カスタムURLリライトの実装
IntlayerはカスタムURLリライトをサポートしており、標準の/locale/path構造とは異なるロケール固有のパスを定義できます。これにより、内部のアプリケーションロジックを正規のまま維持しつつ、英語では/about、フランス語では/a-proposのようなURLを実現できます。
設定
カスタムリライトは、フレームワーク固有のフォーマッターを使用して intlayer.config.ts ファイルの routing セクションで設定します。これらのフォーマッターは、お使いのルーターに適した正しい構文を提供します。
intlayer.config.ts
コードをコピー
コードをクリップボードにコピー
import { Locales, type IntlayerConfig } from "intlayer";import { nextjsRewrite } from "intlayer/routing";const config: IntlayerConfig = { // その他の設定... routing: { mode: "prefix-no-default", rewrite: nextjsRewrite({ "/[locale]/about": { fr: "/[locale]/a-propos", es: "/[locale]/acerca-de", }, "/[locale]/products/[id]": { fr: "/[locale]/produits/[id]", es: "/[locale]/productos/[id]", }, }), },};export default config;利用可能なフォーマッタ
Intlayer は主要なフレームワーク向けのフォーマッタを提供します:
nextjsRewrite: Next.js App Router 用。[slug]、[...slug](1+)、および[[...slug]](0+) をサポートします。svelteKitRewrite: SvelteKit 用。[slug]、[...path](0+)、および[[optional]](0-1) をサポートします。reactRouterRewrite: React Router 用。:slugと*(0+) をサポートします。vueRouterRewrite: Vue Router 4 用。:slug、:slug?(0-1)、:slug*(0+)、および:slug+(1+) をサポートします。solidRouterRewrite: Solid Router 用。:slugと*slug(0+) をサポートします。tanstackRouterRewrite: TanStack Router 向け。$slugと*(0+) をサポートします。nuxtRewrite: Nuxt 3 向け。[slug]と[...slug](0+) をサポートします。viteRewrite: 任意の Vite ベースプロジェクト向けの汎用フォーマッタ。Vite プロキシ用の構文を正規化します。
高度なパターン
Intlayer はこれらのパターンを内部で統一された構文に正規化し、高度なパスのマッチングと生成を可能にします:
- オプションセグメント:
[[optional]]（SvelteKit）や:slug?（Vue/React）に対応しています。 - キャッチオール（0個以上）:
[[...slug]]（Next.js）、[...path]（SvelteKit/Nuxt）、または*（React/TanStack）は複数のセグメントにマッチできます。 - 必須キャッチオール（1個以上）:
[...slug]（Next.js）や:slug+（Vue）は少なくとも1つのセグメントが存在することを保証します。
クライアント側のURL修正: useRewriteURL
ブラウザのアドレスバーが常に「見た目の良い」ローカライズされたURLを反映するように、Intlayer は useRewriteURL フックを提供します。このフックは、ユーザーが正規のパスに到達したときに window.history.replaceState を使って URL をサイレントに更新します。
フレームワークでの使用法
tsx
コードをコピー
コードをクリップボードにコピー
'use client';import { useRewriteURL } from "next-intlayer";const MyLayout = ({ children }) => { useRewriteURL(); // /fr/about を /fr/a-propos に自動的に修正します return <>{children}</>;};ルーター統合とプロキシ
Intlayer のサーバーサイドプロキシ（Vite と Next.js）は、SEO の一貫性を確保するためにカスタムリライトを自動的に処理します。
- 内部リライト: ユーザーが
/fr/a-proposにアクセスした場合、プロキシは内部的にそれを/fr/aboutにマッピングして、フレームワークが正しいルートに一致するようにします。 - 正規化リダイレクト: ユーザーが手動で
/fr/aboutと入力した場合、プロキシは/fr/a-proposへ 301/302 リダイレクトを発行し、検索エンジンがページの単一のバージョンのみをインデックスするようにします。
Next.js 統合
Next.js との統合は intlayerProxy ミドルウェアで完全に処理されます。
middleware.ts
コードをコピー
コードをクリップボードにコピー
import { intlayerProxy } from "next-intlayer/middleware";import { NextRequest } from "next/server";export function middleware(request: NextRequest) { return intlayerProxy(request);}Vite 統合
SolidJS、Vue、Svelte 向けに、開発中のリライトは intlayerProxy Vite プラグインが管理します。
vite.config.ts
コードをコピー
コードをクリップボードにコピー
import { defineConfig } from "vite";import { intlayerProxy } from "vite-intlayer";export default defineConfig({ plugins: [intlayerProxy()],});主要機能
1. マルチコンテキスト・リライト
各フォーマッタは、異なる利用先向けの特殊化されたルールを含む RewriteObject を生成します:
url: クライアント側の URL 生成に最適化（ロケールセグメントを取り除く）。nextjs: Next.js のミドルウェア向けに[locale]を保持。vite: Vite プロキシ向けに:localeを保持。
2. 自動パターン正規化
Intlayer は内部ですべてのパターン構文（例: [param] を :param に変換するなど）を正規化し、ソースフレームワークに関係なくマッチングが一貫するようにします。
3. SEO の正規 URL
正規パスから見やすいエイリアスへのリダイレクトを強制することで、Intlayer は重複コンテンツの問題を防ぎ、サイトの発見性を向上させます。
コアユーティリティ
getLocalizedUrl(url, locale): リライトルールを尊重してローカライズされた URL を生成します。getCanonicalPath(path, locale): ローカライズされた URL を内部の正規パスに解決します。getRewritePath(pathname, locale): パス名がより見やすいローカライズ済みエイリアスに修正される必要があるかどうかを検出します。