# General Translation React SDKs (gt-react, gt-next): Pages Router ミドルウェア
URL: https://generaltranslation.com/ja/docs/react/nextjs/pages-router-middleware.mdx
---

title: Pages Router ミドルウェア
description: Next.js Pages Router 向けに General Translation のロケールルーティングを設定する方法。
related:
  links:
    - /docs/react/nextjs-pages-router-quickstart
    - /docs/react/nextjs/pages-router-static-site-generation
    - /docs/react/nextjs/reference/functions/create-next-middleware

---

ミドルウェアと `[locale]` のルートセグメントを設定し、Pages 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、cookie、ブラウザのヘッダー、またはデフォルトロケールからロケールを検出します。次に、リクエストを対応するローカライズ済みルートにリダイレクトまたはリライトします。

## ロケールルートを追加する [#locale-route]

Pages Router のページを `pages/[locale]` の下に移動します。`_app.tsx` は `pages` のルートに置いたままにします。

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

    <Folder name="[locale]">
      <File name="index.tsx" />

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

  <File name="proxy.ts" />
</Files>

このルートセグメントには、ミドルウェアで選択されたロケールが渡されます。ルーティングオプションとローカライズされたパスの設定については、[`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) を参照してください。

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

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

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

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

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

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

- /docs/react/nextjs-pages-router-quickstart
- /docs/react/nextjs/pages-router-static-site-generation
- /docs/react/nextjs/reference/functions/create-next-middleware