Descripción general

Este comportamiento está actualmente en desuso; consulta gt-next@6.10.0 para conocer el nuevo comportamiento.

El renderizado estático es una capacidad fundamental del framework Next.js, ya que ofrece páginas prerenderizadas en tiempo de compilación para lograr un rendimiento óptimo y un mejor SEO. Teniendo esto en cuenta, cualquier librería nativa de Next.js debería funcionar sin problemas dentro de este modelo de renderizado. gt-next 6.9.0 incorpora compatibilidad con el renderizado estático, lo que permite a las aplicaciones internacionalizadas aprovechar al máximo las capacidades de generación estática de Next.js sin comprometer la detección de la configuración regional ni la funcionalidad de traducción.

¿Qué es el renderizado estático?

El renderizado estático genera HTML en tiempo de compilación en lugar de hacerlo en cada solicitud. Aunque este enfoque ofrece un rendimiento excepcional, plantea desafíos para las bibliotecas de i18n, que normalmente dependen de las cabeceras de la solicitud, las cookies o el middleware para determinar la configuración regional del usuario. Durante el renderizado estático, estas dependencias disponibles solo en tiempo de solicitud no están presentes, por lo que se requieren métodos alternativos para detectar la configuración regional.

Configuración del renderizado estático

Antes de configurar gt-next, asegúrate de que tu aplicación de Next.js esté configurada para la generación estática siguiendo la documentación de generateStaticParams.

La configuración consta de tres componentes clave:

1. Activa el renderizado estático en la configuración

export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

2. Configura el middleware

Configura el middleware para las solicitudes dinámicas:

// proxy.ts (Next.js 16+) o middleware.ts (Next.js 15 e inferiores)
import { createNextMiddleware } from 'gt-next/middleware'

export default createNextMiddleware();

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

3. Definir la detección estática de la configuración regional

Crea una función getStaticLocale que determine la configuración regional durante el renderizado estático. Esta función solo se ejecuta durante la generación estática; durante el SSR, se utiliza el comportamiento predeterminado (leer encabezados, cookies, etc.).

Next.js 15.5+

// getStaticLocale.ts
import { locale } from "next/root-params";

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

Next.js 15.1-15.4

// getStaticLocale.ts  
import { unstable_rootParams } from "next/server";

export default async function getStaticLocale() {
  return (await unstable_rootParams())?.locale;
}

Se puede llamar a getStaticRegion para personalizar la detección de la región durante el renderizado estático.

Beneficios

Nativo de Next.js: Aprovecha el sistema nativo de root params de Next.js para garantizar la compatibilidad con el renderizado estático.

Funciones adicionales

Además de la generación estática, esta versión también añade compatibilidad con las funciones personalizadas getLocale() y getRegion(), que pueden configurarse tanto para SSR como para entornos de renderizado estático.