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

Renderiza previamente una ruta del App Router por cada configuración regional con `generateStaticParams`. El enrutamiento por configuración regional y la resolución de la configuración regional de la solicitud usan la misma configuración que las rutas dinámicas.

## Mantén tu configuración de Next.js [#config]

La generación estática no cambia la configuración de `withGTConfig`:

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { withGTConfig } from 'gt-next/config';

const nextConfig: NextConfig = {};

export default withGTConfig(nextConfig);
```

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

Sigue la [guía de middleware de App Router](/docs/react/nextjs/app-router-middleware) para crear `proxy.ts`, mover tus rutas a `app/[locale]` y definir la función personalizada [`getLocale`](/docs/react/nextjs/reference/functions/get-locale).

## Desactiva la detección de región [#region]

El resolvedor de región predeterminado lee una cookie, lo que hace que la ruta sea dinámica. Añade `getRegion.ts` en la raíz de tu proyecto para desactivar la detección de región durante el prerenderizado:

```ts title="./getRegion.ts"
export default async function getRegion() {
  return undefined;
}
```

`withGTConfig` detecta este archivo de forma automática.

## Generar rutas por configuración regional [#generate-routes]

Devuelve un parámetro de ruta por cada configuración regional configurada:

```tsx title="app/[locale]/page.tsx"
import { getLocales, T } from 'gt-next';

export function generateStaticParams() {
  return getLocales().map((locale) => ({ locale }));
}

export default function HomePage() {
  return <T>Welcome to our site</T>;
}
```

Next.js ahora renderiza previamente `app/[locale]/page.tsx` una vez por cada configuración regional.

<Callout type="warn">
  Esta configuración permite renderizar previamente páginas sin dejar de desplegar un servidor Next.js. Un proyecto con `output: 'export'` no puede compilarse mientras estén presentes `proxy.ts` o `middleware.ts`. Elimina el middleware, exporta `dynamicParams = false`, genera cada ruta de configuración regional y enlaza directamente a esas rutas para lograr una exportación completamente estática; la detección de configuración regional y las redirecciones no estarán disponibles.
</Callout>

## Comprueba la compatibilidad con Next.js [#compatibility]

El archivo personalizado `getLocale.ts` necesita acceder al parámetro raíz `[locale]` durante el renderizado previo. Usa la API disponible en tu versión de Next.js:

| Versión de Next.js   | API de configuración regional raíz                               |
| -------------------- | ---------------------------------------------------------------- |
| 15.5 y posteriores   | `locale()` de `next/root-params`                                 |
| 15.2.0 y 15.2.3–15.4 | `unstable_rootParams()` de `next/server`                         |
| Anterior a 15.2      | Actualiza antes de usar esta configuración de SSG del App Router |

`gt-next` excluye Next.js 15.2.1 y 15.2.2 de su rango compatible de dependencias entre pares. Actualiza esas versiones a la 15.2.3 o posterior.

Para Next.js 15.2.0 o 15.2.3–15.4, usa:

```ts title="./getLocale.ts"
import { unstable_rootParams } from 'next/server';

export default async function getLocale() {
  const params = await unstable_rootParams();
  return params?.locale;
}
```

Mantén el ejemplo de `next/root-params` para Next.js 15.5 y versiones posteriores de la [guía de middleware](/docs/react/nextjs/app-router-middleware#root-locale) en los proyectos actuales.

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

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

El middleware no se ejecuta mientras Next.js renderiza previamente una página. Confirma que `getLocale.ts` exista en la raíz del proyecto o que [`getLocalePath`](/docs/react/nextjs/config#request-function-paths) apunte a ese archivo.

Si un valor de ruta arbitrario debe generar un error 404 en lugar del contenido alternativo de la configuración regional predeterminada, valida el parámetro `[locale]` con [`isLocaleSupported`](/docs/react/nextjs/reference/functions/is-locale-supported).

### `DYNAMIC_SERVER_USAGE`

Este error indica que el renderizado estático ha accedido a una API de solicitud dinámica. Comprueba lo siguiente:

* Que `getLocale.ts` lea únicamente el parámetro de la ruta raíz.
* Que `getRegion.ts` devuelva un valor fijo o `undefined`.
* Que ninguna de las funciones llame a `headers()` o `cookies()`.

Si Cache Components está habilitado, sigue también la [configuración más estricta de Cache Components](/docs/react/nextjs/cache-components).

### Errores de exportación del parámetro raíz

Un error que indica que no existe la exportación `locale` normalmente significa que el proyecto usa una API incorrecta para su versión de Next.js. Consulta la [tabla de compatibilidad](#compatibility).

El segmento `[locale]` también debe ser el primer segmento dinámico del árbol de App Router. Coloca el layout raíz en `app/[locale]/layout.tsx`; un layout situado por encima de ese segmento no puede leer la configuración regional raíz durante el renderizado previo.

### Rutas de imágenes de metadatos

Los archivos de Open Graph, Twitter, iconos e iconos de Apple son internamente Route Handlers y no pueden leer `next/root-params`. Lee `params.locale` y llama a [`registerLocale`](/docs/react/nextjs/reference/functions/register-locale) antes de usar otros helpers del servidor. Consulta [Registro de configuraciones regionales de solicitudes](/docs/react/nextjs/registering-request-locales#metadata-images).

## Next steps

- /docs/react/nextjs/app-router-middleware
- /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.