# General Translation React SDKs (gt-react, gt-next, gt-react-native): Pages Router のロケールルーティング
URL: https://generaltranslation.com/ja/docs/react/nextjs/pages-router-middleware.mdx
---

title: Pages Router のロケールルーティング
description: Pages Router で General Translation を使用して Next.js の国際化ルーティングを設定する方法。
related:
  links:
    - /docs/react/nextjs-pages-router-quickstart
    - /docs/react/nextjs/pages-router-static-site-generation
    - /docs/react/nextjs/config

---

Pages Router は Next.js の国際化ルーティングを使用してローカライズされた URL を解決し、アクティブなロケールを `gt-next` に渡します。ルートは `pages` 配下の通常の場所に配置されます。

## ロケールルーティングを設定する [#configure-routing]

`gt.config.json` のロケール設定を `next.config.ts` にインポートします。`locales` 配列には `defaultLocale` を含める必要があります。

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["en", "es", "fr"]
}
```

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { withGTConfig } from 'gt-next/config';
import gtConfig from './gt.config.json';

const nextConfig: NextConfig = {
  i18n: {
    locales: gtConfig.locales,
    defaultLocale: gtConfig.defaultLocale,
  },
};

export default withGTConfig(nextConfig);
```

Next.js では、デフォルトロケールはプレフィックスなしで提供され、その他のロケールにはプレフィックスが付きます。たとえば、英語では `/about`、フランス語では `/fr/about` を使用します。

各ページは `pages` のルートに配置し、`[locale]` セグメントは追加しないでください。

<Files>
  <Folder name="pages">
    <File name="_app.tsx" />

    <File name="index.tsx" />

    <File name="about.tsx" />
  </Folder>

  <File name="next.config.ts" />
</Files>

`withGTServerSideProps` と `withGTStaticProps` は、Next.js のデータ関数のコンテキストからロケールを読み取ります。Pages Router のロケールルーティングでは、`gt-next` のミドルウェア、`proxy.ts`、`middleware.ts` は不要です。

## ロケール変更を連動させる [#locale-changes]

ロケール対応の `_reload` callback を [`GTProvider`](/docs/react/reference/components/gt-provider) に渡して、ロケール変更時に Pages Router のナビゲーションを使い、選択したロケールのページ props を読み込むようにします:

```tsx title="pages/_app.tsx"
import type { AppProps } from 'next/app';
import Router from 'next/router';
import { GTProvider, type WithGTStaticProps } from 'gt-next';

export default function App({
  Component,
  pageProps,
}: AppProps<WithGTStaticProps>) {
  const { locale, translations } = pageProps;

  return (
    <GTProvider
      locale={locale}
      translations={translations}
      _reload={({ locale: nextLocale }) => {
        void Router.push(Router.pathname, Router.asPath, {
          locale: nextLocale,
        });
      }}
    >
      <Component {...pageProps} />
    </GTProvider>
  );
}
```

サーバーサイドでレンダリングされるページでは、代わりに `WithGTServerSideProps` を使用してください。この callback は、provider&#39;s デフォルトのページ全体の再読み込みを、Pages Router を使ったナビゲーションに置き換えます。

## ロケール検出の仕組み [#locale-detection]

Next.js では、`getServerSideProps` または `getStaticProps` が実行される前にリクエストロケールが解決されます。

* `/fr/about` のようなロケールプレフィックスにより、`context.locale` は `fr` に設定されます。
* `NEXT_LOCALE` cookie にはユーザーの設定が保存され、プレフィックスなしのリクエストはリダイレクトされる場合があります。
* 保存された設定がない場合、ブラウザの言語設定に基づいてロケールが選択されることがあります。
* 設定済みのロケールがほかに一致しない場合は、`defaultLocale` が使用されます。

ブラウザおよび cookie による自動リダイレクトを無効にするには、`nextConfig.i18n` 内で `localeDetection: false` を設定します。ロケールプレフィックス付きルートとロケール対応ルーターによるナビゲーションは、引き続き機能します。

<Callout type="info">
  **v11.1.3 での変更:** Pages Router のセットアップでは、`gt-next` ミドルウェアと `pages/[locale]` セグメントの代わりに、Next.js の国際化ルーティングを使用するようになりました。Next.js から `context.locale` が提供されない場合、既存のリクエスト検出は互換性のためのフォールバックとして引き続き使用されます。
</Callout>
## Next steps

- /docs/react/nextjs-pages-router-quickstart
- /docs/react/nextjs/pages-router-static-site-generation
- /docs/react/nextjs/config