# gt-next: General Translation Next.js SDK: Generación de sitios estáticos URL: https://generaltranslation.com/es/docs/next/guides/ssg.mdx --- title: Generación de sitios estáticos description: Prerrenderiza páginas internacionalizadas en tiempo de compilación para obtener un rendimiento óptimo --- ## Resumen La generación de sitios estáticos (SSG) prerrenderiza páginas en tiempo de compilación y crea archivos HTML estáticos que pueden servirse directamente sin procesamiento del lado del servidor. Cuando se combina con la internacionalización, SSG genera versiones prerrenderizadas para cada configuración regional. **Ten en cuenta los siguientes problemas al configurar SSG:** * [Compatibilidad entre versiones de Next.js](#nextjs-version-compatibility) * [Páginas que no se generan de forma estática](#pages-not-generating-statically) * [Error en tiempo de ejecución en producción: "DYNAMIC_SERVER_USAGE"](#production-runtime-error-dynamic_server_usage) * ["Export locale doesn't exist in target module"](#export-locale-doesnt-exist-in-target-module) *** ## Configuración ### Requisitos de configuración Para habilitar SSG con GT, necesitas lo siguiente: 1. **App Router con enrutamiento mediante middleware** - consultar la [guía de middleware](/docs/next/guides/middleware) 2. **Función `getLocale` personalizada** - para detectar la configuración regional durante el renderizado estático 3. **desactivar** - la detección de región no es compatible con el renderizado estático 4. **Función `generateStaticParams`** - para generar parámetros estáticos para cada configuración regional 5. **Archivos de layout dentro del directorio `/[locale]`** - todos los archivos de layout (normalmente, `layout.tsx` y `page.tsx`) deben estar dentro del directorio `/[locale]` ### Paso 1: Configurar el middleware Configura el middleware para las solicitudes dinámicas (consulta la [guía de middleware](/docs/next/guides/middleware)): ```ts // proxy.ts (Next.js 16+) o middleware.ts (Next.js 15 y versiones anteriores) import { createNextMiddleware } from 'gt-next/middleware'; export default createNextMiddleware(); export const config = { matcher: ['/((?!api|static|.*\\..*|_next).*)'], }; ``` ### Paso 2: Define la detección de la configuración regional y de la región Crea las funciones `getLocale` y `getRegion` para detectar la configuración regional y la región durante el renderizado estático: #### Next.js 15.5+ ```ts // getLocale.ts import { locale } from 'next/root-params'; export default async function getLocale() { return await locale(); } ``` #### Next.js 15.1-15.4 ```ts // getLocale.ts import { unstable_rootParams } from 'next/server'; export default async function getLocale() { return (await unstable_rootParams())?.locale; } ``` ### Paso 3: Desactiva getRegion Como la detección de región no es compatible con el renderizado estático, debes sobrescribir la función `getRegion` para que devuelva una región fija. ```ts // getRegion.ts export default async function getRegion() { return undefined; } ``` ### Paso 4: Configura generateStaticParams Asegúrate de tener [`generateStaticParams`](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) configurado para tus locales. ```tsx title="page.tsx" import { getLocales } from 'gt-next/server'; export async function generateStaticParams() { return getLocales().map((locale) => ({ locale })); } export default async function Page() { ... } ``` ### Paso 5: Mueve cualquier archivo de layout dentro del directorio `/[locale]` Todos los archivos deben tener acceso a la configuración regional del usuario mediante el campo `/[locale]` de la URL. Por lo tanto, deben ser descendientes del directorio `/[locale]`. Asegúrate de mover tu archivo de layout raíz a `/[locale]/layout.tsx`. *** ## Configuración adicional Si no quieres tener `getLocale.ts` y `getRegion.ts` en tu directorio raíz, puedes especificar un directorio personalizado en tu archivo `next.config.js`. ```js // next.config.js export default withGTConfig(nextConfig, { getLocalePath: './src/i18n/getLocale.ts', getRegionPath: './src/i18n/getRegion.ts', }); ``` ## Problemas comunes [#common-issues] ### Compatibilidad de versiones de Next.js En las versiones anteriores a Next.js 15.1, no hay forma de acceder a los parámetros de la ruta URL durante la generación estática. Tendrás que actualizar a Next.js 15.1 o una versión posterior para usar SSG con gt-next. ### Páginas que no se generan de forma estática Si tus páginas no se generan de forma estática, asegúrate de que: * Tus funciones `getLocale` y `getRegion` estén configuradas correctamente ### Error en tiempo de ejecución en producción: "DYNAMIC_SERVER_USAGE" ``` ⨯ [Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] { digest: 'DYNAMIC_SERVER_USAGE' } ``` Este error se produce cuando los archivos `getLocale` o `getRegion` no existen o no están configurados correctamente. Comprueba de nuevo que el [paso 2](#step-2-define-locale-and-region-detection) y el [paso 3](#step-3-disable-getregion) estén completos. ### "Export locale doesn't exist in target module" ``` ./getLocale.ts:2:1 Export locale doesn't exist in target module 1 | // getLocale.ts > 2 | import { locale } from 'next/root-params'; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 3 | export default async function getLocale() { 4 | return await locale(); 5 | } ``` Este error suele producirse cuando tienes un archivo `layout.tsx`, `page.tsx`, etc. que no está dentro del directorio `/[locale]`. Para solucionar este problema, asegúrate de que todos tus archivos de segmento de ruta (normalmente `layout.tsx` y `page.tsx`) estén dentro del directorio `/[locale]`. Durante SSG, la única forma de resolver la configuración regional de un usuario es mediante la ruta de la URL. Por lo tanto, si intentamos ejecutar un archivo `layout.tsx` fuera del directorio `/[locale]`, se producirá un error porque no tiene acceso a este parámetro raíz. Lo poco intuitivo es que, cuando se renderiza una página, también se renderiza cada archivo `layout.tsx` que la envuelve. Así, podrías haber añadido SSG a un archivo `page.tsx` que claramente está dentro del directorio `/[locale]`, pero en realidad hay un archivo `layout.tsx` en otro lugar que es el responsable del error. Desaconsejamos encarecidamente esta práctica. Todos los archivos de segmento de ruta (excepto `not-found.tsx`) deben estar ubicados dentro del directorio `/[locale]` cuando se usa SSG. Pero, si es imprescindible, necesitarás dos archivos de layout raíz separados: uno dentro del directorio `/[locale]` y otro fuera de él. De esta forma, SSG solo ejecutará el layout dentro del directorio `/[locale]`. Además, puede que tengas que modificar el middleware para enrutar a los segmentos que existan fuera del directorio `/[locale]`, omitiendo el middleware de localización. *** ## Más información * Consulta la [guía de middleware](/docs/next/guides/middleware), necesaria para el enrutamiento por configuración regional * Consulta las [notas de la versión](/devlog/gt-next_v6_10_0) para migrar desde el patrón SSG heredado * Consulta un ejemplo de aplicación [aquí](https://github.com/generaltranslation/gt/tree/main/examples/next-ssg)