# General Translation React SDKs (gt-react, gt-next, gt-react-native): Middleware di App Router
URL: https://generaltranslation.com/it/docs/react/nextjs/app-router-middleware.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Come configurare il routing delle impostazioni regionali di General Translation per App Router di Next.js.

Configura il middleware, un segmento radice `[locale]` e una funzione per l'impostazione regionale della richiesta, in modo che le richieste di App Router vengano instradate verso il percorso localizzato corretto.

## Configura il middleware [#middleware]

Crea `proxy.ts` nella radice del progetto (`middleware.ts` in Next.js 15 e versioni precedenti):

```ts title="proxy.ts"
import { createNextMiddleware } from 'gt-next/middleware';

export default createNextMiddleware();

export const config = {
  matcher: ['/((?!api|static|.*\\..*|_next).*)'],
};
```

Il middleware rileva l'impostazione regionale dall'URL, dal cookie, dagli header del browser o dall'impostazione regionale predefinita. Poi reindirizza o riscrive la richiesta verso il percorso localizzato corrispondente.

## Aggiungi la route dell'impostazione regionale [#locale-route]

Sposta le pagine di App Router in `app/[locale]`:

<Files>
  <Folder name="app">
    <Folder name="[locale]">
      <File name="layout.tsx" />

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

  <File name="getLocale.ts" />

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

Il segmento di route riceve l&#39;impostazione regionale selezionata dal middleware. Consulta [`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) per le opzioni di routing, gli [alias dei percorsi localizzati](/docs/react/nextjs/reference/functions/create-next-middleware#path-config) e le [implementazioni di pagina specifiche per impostazione regionale](/docs/react/nextjs/reference/functions/create-next-middleware#route-overrides).

<Callout type="info">
  **Rendering al momento della richiesta:** puoi mantenere il root layout in `app/layout.tsx`
  e collocare sotto `app/[locale]` soltanto le pagine. Chiama
  [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) dal
  root layout; il middleware fornisce l&#39;impostazione regionale della richiesta, quindi non ti serve
  un `getLocale.ts` personalizzato. Usa la funzione di richiesta indicata di seguito durante il prerendering,
  perché il middleware non viene eseguito durante la generazione statica.
</Callout>

## Leggi l&#39;impostazione regionale della radice [#root-locale]

Crea `getLocale.ts` nella radice del progetto. `withGTConfig` rileva automaticamente questo file.

```ts title="./getLocale.ts"
import { locale } from 'next/root-params';

export default async function getLocale() {
  return await locale();
}
```

Il parametro radice fornisce l&#39;impostazione regionale senza leggere gli header della richiesta né i cookie.

<Callout type="info">
  **Next.js 15.2–15.4:** `next/root-params` è disponibile in Next.js 15.5 e
  versioni successive. Dalla 15.2 alla 15.4, importa `unstable_rootParams` da `next/server`
  e restituisci invece `(await unstable_rootParams())?.locale`. I parametri radice non sono
  disponibili in alcuna forma prima della 15.2, quindi determina l&#39;impostazione regionale dalla richiesta
  in quel caso.
</Callout>

## Cambiare impostazione regionale [#locale-switching]

Quando un visitatore cambia impostazione regionale, `gt-next` memorizza la scelta in un cookie e di norma aggiorna i Server Components con `router.refresh()`.

Se il visitatore passa all&#39;impostazione regionale predefinita mentre l&#39;URL corrente corrisponde a un&#39;altra impostazione regionale, il browser ricarica la pagina, così il middleware può riscrivere il pathname. Ad esempio, con un&#39;impostazione regionale predefinita senza prefisso, `/fr/about` diventa `/about`.

## Rifiuta le impostazioni regionali non supportate [#validate-locales]

Per impostazione predefinita, un&#39;impostazione regionale della richiesta non supportata genera un avviso e usa `defaultLocale` come fallback. Per le route rigorose con prefisso dell&#39;impostazione regionale, convalida il parametro della route in `app/[locale]/layout.tsx` e chiama `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 (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}
```

[`isLocaleSupported`](/docs/react/nextjs/reference/functions/is-locale-supported) accetta gli alias delle impostazioni regionali configurate e restringe il valore a `string`. Il middleware non converte automaticamente un segmento di route sconosciuto in un errore 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.