La generación de sitios estáticos renderiza previamente las páginas en tiempo de build, creando archivos HTML estáticos para cada locale. Esto ofrece un rendimiento excelente y beneficios de SEO, y garantiza que todo el contenido traducido esté disponible de inmediato cuando los usuarios visiten tu sitio.

Enrutador de la aplicación

Requisitos de configuración

Para habilitar SSG con GT, necesitas:

1. App Router con enrutamiento mediante middleware - consulta la guía de middleware
2. Traducciones locales - consulta la guía de traducciones locales
3. Importaciones del lado del cliente - usa gt-next/client en lugar de gt-next

Paso 1: Configuración de GTProvider

Coloca GTProvider en tu layout [locale] con la función loadTranslations:

// app/[locale]/layout.tsx
import { GTProvider } from 'gt-next/client';
import { loadTranslations } from '@/loadTranslations';

export default async function RootLayout({ children, params }) {
  const { locale } = await params;
  
  return (
    <GTProvider loadTranslations={loadTranslations} locale={locale}>
      {children}
    </GTProvider>
  );
}

Paso 2: Usa importaciones del cliente

Importa todos los componentes y hooks de GT desde gt-next/client:

// ✅ Usa importaciones de cliente para SSG
import { useGT, T } from 'gt-next/client';

// ❌ Estas impiden SSG
import { getGT } from 'gt-next/server';
import { T } from 'gt-next';

Paso 3: Configura generateStaticParams

Asegúrate de tener generateStaticParams configurado para tus locales.

getLocale personalizado

Para SSG, crea una función getLocale personalizada que funcione con la generación estática:

Next.js 15.5+

// getLocale.ts
import { locale } from "next/root-params";
export default async function getLocale() {
  return await locale();
}

Next.js 15.1–15.4

// getLocale.ts  
import { unstable_rootParams } from "next/server";
export default async function getLocale() {
  return (await unstable_rootParams())?.locale;
}

Versiones anteriores

Lamentablemente, en versiones anteriores no es posible acceder a los parámetros de la ruta de la URL con SSG. Deberás actualizar a Next.js 15.1 o posterior.

Problemas frecuentes

Páginas que no se generan de forma estática

Si tus páginas no se están generando de forma estática, comprueba que todos los componentes y hooks de GT importen desde gt-next/client:

// ❌ Estos impiden SSG
import { getGT } from 'gt-next/server';
import { getLocale } from 'gt-next/server';
import { getTranslations } from 'gt-next/server';
import { T } from 'gt-next';

// ✅ Estos funcionan con SSG
import { useGT, T } from 'gt-next/client';

Cualquier elemento que lea headers o cookies impedirá la generación estática.

Próximos pasos

• Almacenamiento local de traducciones - Obligatorio para la configuración de SSG
• Guía de middleware - Obligatoria para el enrutamiento por locale