# General Translation React SDKs (gt-react, gt-next, gt-react-native): Routing delle impostazioni regionali del Pages Router
URL: https://generaltranslation.com/it/docs/react/nextjs/pages-router-middleware.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Come configurare il routing internazionalizzato di Next.js con General Translation nel Pages Router.

Il Pages Router utilizza il routing internazionalizzato di Next.js per risolvere gli URL localizzati e passare l'impostazione regionale attiva a `gt-next`. Le route restano nelle consuete posizioni in `pages`.

## Configura il routing delle impostazioni regionali [#configure-routing]

Importa le impostazioni regionali da `gt.config.json` in `next.config.ts`. L'array `locales` deve includere `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 serve l'impostazione regionale predefinita senza prefisso e aggiunge un prefisso alle altre. Ad esempio, per l'inglese usa `/about`, mentre per il francese `/fr/about`.

Mantieni ogni pagina nella radice di `pages`; non aggiungere un segmento `[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` e `withGTStaticProps` leggono l&#39;impostazione regionale dal contesto della funzione dati di Next.js. Per il routing delle impostazioni regionali nel Pages Router non sono necessari middleware `gt-next`, `proxy.ts` o `middleware.ts`.

## Collega i cambi di impostazione regionale [#locale-changes]

Passa un callback `_reload` compatibile con l&#39;impostazione regionale a [`GTProvider`](/docs/react/reference/components/gt-provider) affinché i cambi di impostazione regionale usino la navigazione del Pages Router e carichino i props della pagina per l&#39;impostazione regionale selezionata:

```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>
  );
}
```

Per le pagine renderizzate lato server, usa invece `WithGTServerSideProps`. Il callback sostituisce il ricaricamento completo della pagina predefinito del provider con una navigazione tramite Pages Router.

## Come funziona il rilevamento dell&#39;impostazione regionale [#locale-detection]

Next.js determina l&#39;impostazione regionale della richiesta prima dell&#39;esecuzione di `getServerSideProps` o `getStaticProps`:

* Un prefisso dell&#39;impostazione regionale come `/fr/about` imposta `context.locale` su `fr`.
* Il cookie `NEXT_LOCALE` memorizza la preferenza dell&#39;utente e può reindirizzare una richiesta priva di prefisso.
* Le preferenze linguistiche del browser possono selezionare un&#39;impostazione regionale quando non è memorizzata alcuna preferenza.
* Viene utilizzato `defaultLocale` quando nessun&#39;altra impostazione regionale configurata corrisponde.

Imposta `localeDetection: false` in `nextConfig.i18n` per disabilitare i reindirizzamenti automatici basati sul browser e sui cookie. Le route con prefisso dell&#39;impostazione regionale e la navigazione del router compatibile con le impostazioni regionali continuano a funzionare.

<Callout type="info">
  **Modificato nella versione v11.1.3:** La configurazione di Pages Router ora utilizza il routing internazionalizzato di Next.js anziché il middleware `gt-next` e un segmento `pages/[locale]`. Il rilevamento delle richieste esistente rimane come fallback di compatibilità quando Next.js non fornisce `context.locale`.
</Callout>

## Next steps

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

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.