# General Translation React SDKs (gt-react, gt-next, gt-react-native): App Router ミドルウェア URL: https://generaltranslation.com/ja/docs/react/nextjs/app-router-middleware.mdx Docs index: https://generaltranslation.com/llms.txt Description: Next.js App Router 向けに General Translation のロケールルーティングを設定する方法。ミドルウェア、`[locale]` のルートセグメント、リクエストロケール関数を設定し、App Router のリクエストが適切なローカライズされたルートに解決されるようにします。 ## ミドルウェアを設定する [#middleware] プロジェクトのルートに `proxy.ts` を作成します (Next.js 15 以前では `middleware.ts`) : ```ts title="proxy.ts" import { createNextMiddleware } from 'gt-next/middleware'; export default createNextMiddleware(); export const config = { matcher: ['/((?!api|static|.*\\..*|_next).*)'], }; ``` ミドルウェアは、URL、クッキー、ブラウザのヘッダー、またはデフォルトロケールからロケールを検出します。次に、対応するローカライズされたルートにリクエストをリダイレクトまたはリライトします。 ## ロケールルートを追加する [#locale-route] App Router のページを `app/[locale]` 配下に移動します。このルートセグメントは、ミドルウェアで選択されたロケールを受け取ります。ルーティングオプション、[ローカライズされたパスのエイリアス](/docs/react/nextjs/reference/functions/create-next-middleware#path-config)、および[ロケール固有のページ実装](/docs/react/nextjs/reference/functions/create-next-middleware#route-overrides)については、[`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) を参照してください。 **リクエスト時のレンダリング:** root layout は `app/layout.tsx` のままにして、ページのみを `app/[locale]` 配下に置くこともできます。root layout から [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) を呼び出してください。ミドルウェアがリクエストロケールを提供するため、独自の `getLocale.ts` は不要です。静的生成の間はミドルウェアが実行されないため、事前レンダリング時は以下のリクエスト関数を使用してください。 ## ルートロケールを取得する [#root-locale] プロジェクトのルートに `getLocale.ts` を作成します。`withGTConfig` はこのファイルを自動的に検出します。 ```ts title="./getLocale.ts" import { locale } from 'next/root-params'; export default async function getLocale() { return await locale(); } ``` root parameter により、リクエストヘッダーやクッキーを読み取らずにロケールを取得できます。 **Next.js 15.2～15.4:** `next/root-params` は Next.js 15.5 以降で利用できます。 15.2～15.4 では、`next/server` から `unstable_rootParams` をインポートし、代わりに `(await unstable_rootParams())?.locale` を返してください。15.2 より前では root params はどの形式でも利用できないため、その場合はリクエストからロケールを解決してください。 ## ロケールを切り替える [#locale-switching] 訪問者がロケールを変更すると、`gt-next` はその選択をクッキーに保存し、通常は `router.refresh()` で Server Components を再描画します。現在の URL が別のロケールに解決される状態で訪問者がデフォルトロケールへ切り替えた場合は、ミドルウェアが pathname を書き換えられるように、ブラウザが再読み込みされます。たとえば、デフォルトロケールにプレフィックスを付けない設定では、`/fr/about` は `/about` になります。 ## サポートされていないロケールを拒否する [#validate-locales] デフォルトでは、サポートされていないリクエストロケールの場合、警告が表示され、`defaultLocale` にフォールバックします。ロケールプレフィックス付きの厳格なルートでは、`app/[locale]/layout.tsx` でルートパラメータを検証し、`notFound()` を呼び出します。 ```tsx title="app/[locale]/layout.tsx" import { isLocaleSupported } from 'gt-next'; import { notFound } from 'next/navigation'; export default async function LocaleLayout({ children, params, }: { children: React.ReactNode; params: Promise<{ locale: string }>; }) { const { locale } = await params; if (!isLocaleSupported(locale)) { notFound(); } return ( {children} ); } ``` [`isLocaleSupported`](/docs/react/nextjs/reference/functions/is-locale-supported) は、設定されたロケールのエイリアスを受け入れ、値を `string` に絞り込みます。ミドルウェアは、不明なルートセグメントを自動的に404として扱いません。 ## Next steps - /docs/react/nextjs/app-router-static-site-generation - /docs/react/nextjs/registering-request-locales - /docs/react/nextjs/cache-components - /docs/react/nextjs/locale-alias-seo ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.