# General Translation React SDKs (gt-react, gt-next, gt-react-native): Generación estática de sitios en Pages Router
URL: https://generaltranslation.com/es/docs/react/nextjs/pages-router-static-site-generation.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo renderizar previamente páginas localizadas del Pages Router de Next.js con General Translation.

Renderiza previamente páginas localizadas de Pages Router con `withGTStaticProps`. La configuración sigue el mismo patrón que `withGTServerSideProps`, pero Next.js genera las props en tiempo de compilación.

## Configura el enrutamiento por configuración regional [#config]

Next.js debe conocer cada configuración regional durante la compilación para generar una versión de cada página para cada configuración regional. Importa los valores de `gt.config.json`; su lista `locales` debe incluir `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);
```

Mantén las páginas en sus ubicaciones habituales. El enrutamiento internacionalizado de Next.js genera URL localizadas sin el segmento `pages/[locale]`. Consulta [enrutamiento de configuración regional en Pages Router](/docs/react/nextjs/pages-router-middleware) para conocer la configuración completa.

## Agregar props estáticas [#static-props]

Envuelve la función `getStaticProps` de cada página 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` agrega la configuración regional y la instantánea de traducción a las props de página que se devuelven. Si la página no tiene otras props, usa la forma sin argumentos:

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

export const getStaticProps = withGTStaticProps();
```

Next.js llama a `getStaticProps` una vez para cada configuración regional configurada y proporciona `context.locale`. Pasa los valores generados a [`GTProvider`](/docs/react/reference/components/gt-provider) e [integra los cambios de configuración regional](/docs/react/nextjs/pages-router-middleware#locale-changes) en `_app.tsx`.

## Gestiona resultados dinámicos [#dynamic-results]

El envoltorio conserva los resultados `redirect` y `notFound` de tu función `getStaticProps`. Solo carga las traducciones cuando el resultado 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,
  };
});
```

Las rutas dinámicas de Pages Router siguen requiriendo `getStaticPaths`. Devuelve cada ruta una vez por cada configuración regional que quieras renderizar previamente:

```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',
  };
};
```

Si una ruta omite `locale`, Next.js genera únicamente la versión de esa ruta para la configuración regional predeterminada.

## Recuperarse de errores de compilación [#build-failures]

### No se puede determinar la configuración regional

`withGTStaticProps` genera una excepción cuando Next.js no proporciona ni `context.locale` ni `context.defaultLocale`. Agrega `i18n.locales` e `i18n.defaultLocale` a `next.config.ts` y mantenlos en consonancia con `gt.config.json`.

No uses [`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) como sustituto de la configuración de `i18n` de Pages Router. El middleware no proporciona la configuración regional de compilación que se pasa a `getStaticProps`.

### La configuración regional predeterminada se muestra sin traducción

La configuración regional predeterminada recibe intencionadamente una instantánea de traducción vacía, ya que el contenido fuente ya está presente en la página. Las demás configuraciones regionales cargan la instantánea de traducción generada.

Si una configuración regional de destino también muestra contenido fuente, confirme que [`npx gt translate`](/docs/cli/reference/commands/translate) se haya ejecutado antes de `next build` y que la configuración regional exista tanto en la configuración de Next.js como en la de General Translation.

### El helper lanza una excepción en un archivo de App Router

`withGTStaticProps` es una API de Pages Router. Usa `generateStaticParams` y la [configuración de generación estática de App Router](/docs/react/nextjs/app-router-static-site-generation) en `app/`.

### La exportación estática no admite el enrutamiento por configuración regional

La configuración `i18n` del Pages Router de Next.js no admite `output: 'export'`. Despliega las páginas generadas a través de un servidor de Next.js o un adaptador de plataforma, o cambia a rutas del App Router que generen un parámetro `[locale]` explícito.

## 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.