# General Translation React SDKs (gt-react, gt-next, gt-react-native): Generazione statica del sito con Pages Router
URL: https://generaltranslation.com/it/docs/react/nextjs/pages-router-static-site-generation.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Come pre-renderizzare le pagine localizzate del Pages Router di Next.js con General Translation.

Pre-renderizza le pagine localizzate del Pages Router con `withGTStaticProps`. La configurazione è analoga a `withGTServerSideProps`, ma Next.js genera le props in fase di build.

## Configura il routing delle impostazioni regionali [#config]

Next.js deve conoscere tutte le impostazioni regionali in fase di build per poter generare una versione di ogni pagina per ciascuna impostazione regionale. Importa i valori da `gt.config.json`; il suo array `locales` deve includere `defaultLocale`:

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

Mantieni le pagine nelle posizioni consuete. Il routing delle impostazioni regionali di Next.js genera URL localizzati senza un segmento `pages/[locale]`. Per la configurazione completa, consulta il [routing delle impostazioni regionali del Pages Router](/docs/react/nextjs/pages-router-middleware).

## Aggiungi le props statiche [#static-props]

Avvolgi la funzione `getStaticProps` di ogni pagina con `withGTStaticProps`:

```tsx title="pages/about.tsx"
import type { GetStaticProps } from 'next';
import { T, Var, withGTStaticProps } from 'gt-next';

type AboutPageProps = {
  generatedAt: string;
};

export const getStaticProps: GetStaticProps<AboutPageProps> =
  withGTStaticProps(async () => ({
    props: {
      generatedAt: new Date().toISOString(),
    },
  }));

export default function AboutPage({ generatedAt }: AboutPageProps) {
  return <T>Generated at: <Var>{generatedAt}</Var></T>;
}
```

`withGTStaticProps` aggiunge l&#39;impostazione regionale e lo snapshot di traduzione alle props della pagina restituita. Se la pagina non ha altre props, usa la forma senza argomenti:

```tsx title="pages/index.tsx"
import { withGTStaticProps } from 'gt-next';

export const getStaticProps = withGTStaticProps();
```

Next.js chiama `getStaticProps` una volta per ogni impostazione regionale configurata e fornisce `context.locale`. Passa i valori generati a [`GTProvider`](/docs/react/reference/components/gt-provider) e [collega le modifiche all&#39;impostazione regionale](/docs/react/nextjs/pages-router-middleware#locale-changes) in `_app.tsx`.

## Gestione dei risultati dinamici [#dynamic-results]

Il wrapper mantiene i risultati `redirect` e `notFound` restituiti dalla funzione `getStaticProps`. Carica le traduzioni solo quando il risultato contiene `props`.

```tsx title="pages/products/[id].tsx"
import { withGTStaticProps } from 'gt-next';

export const getStaticProps = withGTStaticProps(async ({ params }) => {
  const product = await loadProduct(params?.id);

  if (!product) {
    return { notFound: true };
  }

  return {
    props: { product },
    revalidate: 3600,
  };
});
```

Le route dinamiche del Pages Router richiedono comunque `getStaticPaths`. Restituisci ogni percorso una volta per ogni impostazione regionale che vuoi pre-renderizzare:

```tsx title="pages/products/[id].tsx"
import type { GetStaticPaths } from 'next';

export const getStaticPaths: GetStaticPaths = async ({ locales = [] }) => {
  const products = await loadProducts();

  return {
    paths: products.flatMap((product) =>
      locales.map((locale) => ({
        params: { id: product.id },
        locale,
      }))
    ),
    fallback: 'blocking',
  };
};
```

Se un percorso omette `locale`, Next.js genera solo la versione di quel percorso per l&#39;impostazione regionale predefinita.

## Risolvere gli errori di build [#build-failures]

### Non è possibile determinare l&#39;impostazione regionale

`withGTStaticProps` genera un&#39;eccezione quando Next.js non fornisce né `context.locale` né `context.defaultLocale`. Aggiungi `i18n.locales` e `i18n.defaultLocale` a `next.config.ts` e assicurati che siano allineati con `gt.config.json`.

Non utilizzare [`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) in sostituzione della configurazione `i18n` del Pages Router. Il middleware non fornisce l&#39;impostazione regionale in fase di build passata a `getStaticProps`.

### L&#39;impostazione regionale predefinita viene visualizzata senza traduzione

L&#39;impostazione regionale predefinita riceve intenzionalmente uno snapshot delle traduzioni vuoto perché il contenuto sorgente è già presente nella pagina. Le altre impostazioni regionali caricano lo snapshot delle traduzioni generato.

Se anche un&#39;impostazione regionale di destinazione visualizza il contenuto sorgente, verifica che [`npx gt translate`](/docs/cli/reference/commands/translate) sia stato eseguito prima di `next build` e che l&#39;impostazione regionale sia presente sia nella configurazione di Next.js sia in quella di General Translation.

### L&#39;helper genera un&#39;eccezione in un file App Router

`withGTStaticProps` è un&#39;API del Pages Router. Usa `generateStaticParams` e la [configurazione per la generazione statica con App Router](/docs/react/nextjs/app-router-static-site-generation) nella directory `app/`.

### L&#39;esportazione statica non supporta il routing delle impostazioni regionali

La configurazione `i18n` del Pages Router di Next.js non supporta `output: 'export'`. Distribuisci le pagine generate tramite un server Next.js o un adattatore della piattaforma, oppure passa a route dell&#39;App Router che generano un parametro `[locale]` esplicito.

## Next steps

- /docs/react/nextjs/pages-router-middleware
- /docs/react/guides/storing-translations
- /docs/react/guides/managing-locales
- /docs/react/guides/migrating-i18n-libraries

## Sitemap

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