Resumen

gt-next 6.10.0 introduce soporte experimental para componentes en caché y, al mismo tiempo, deja en desuso las funciones estáticas de solicitud heredadas de gt-next@6.9.

• Se añadió soporte experimental para componentes en caché con experimentalLocaleResolution
• Se dejaron en desuso las funciones estáticas de solicitud heredadas de gt-next@6.9

Componentes en caché

Para habilitar la compatibilidad con componentes en caché, agrega experimentalLocaleResolution: true a la configuración de gt-next y sigue la guía de Next.js sobre Cache Components. Al usar componentes en caché con contenido traducible, debes pasar locale como parámetro para garantizar que la invalidación de la caché funcione correctamente entre distintas configuraciones regionales.

Considera esta estructura de la aplicación:

import { Suspense } from "react";
import { getLocale, getLocales } from "gt-next/server";

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

async function CachedContent({locale: _locale}: {locale: string}) {
  "use cache"
  return (
    <div>
      <T><h1>Cached Content</h1></T>
    </div>
  )
}
export default async function Home() {
  const locale = await getLocale()
  return (
    <div>
      <CachedContent locale={locale} />
    </div>
  );
}

El requisito del parámetro locale

Los componentes en caché usan sus parámetros como claves de caché; cualquier componente en caché que contenga contenido traducible debe aceptar un parámetro locale si debe actualizarse cuando cambie la configuración regional del usuario. Por ejemplo, CachedContent debe aceptar un parámetro locale para crear entradas de caché independientes para cada configuración regional. Sin este parámetro, el componente serviría el mismo contenido en caché independientemente de la configuración regional del usuario.

Notas de configuración

Cuando experimentalLocaleResolution está habilitado:

• El proxy de I18n debe estar habilitado para que la resolución de la configuración regional funcione (consulta I18n Proxy)
• Anula cualquier función getLocale personalizada (la resolución de la configuración regional se hace leyendo la ruta de la URL)
• Deshabilita las funciones getRegion y getDomain
• Entra en conflicto con la configuración en desuso experimentalEnableSSG; solo una puede estar habilitada a la vez
• Puedes personalizar el nombre del parámetro de la configuración regional con experimentalLocaleResolutionParam (el valor predeterminado es 'locale')

export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
  // Opcionalmente, personaliza el nombre del parámetro
  experimentalLocaleResolutionParam: 'lang',
})

Desuso de las funciones heredadas de solicitud estática

Tras la introducción del soporte para renderizado estático en gt-next@6.9, ahora estamos dejando en desuso las funciones heredadas de solicitud estática (getStaticLocale, getStaticRegion, getStaticDomain) en favor de las funciones de solicitud estándar (getLocale, getRegion, getDomain).

Este cambio se alinea con nuestro objetivo de simplificar la API sin perder funcionalidad. Las funciones estáticas heredadas seguirán funcionando, pero emitirán advertencias de desuso. Recomendamos migrar a las funciones de solicitud estándar para mantener la coherencia.

Guía de migración

SSG heredado

Reemplaza las funciones en desuso de solicitud estática:

// Antes (en desuso)
export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

// Después  
export default withGTConfig(nextConfig, {
  // Accesible por defecto
})

Elimina cualquier función personalizada getStaticLocale, getStaticRegion o getStaticDomain y sustitúyela por funciones personalizadas getLocale, getRegion o getDomain. Debes agregar una función getLocale personalizada y deshabilitar la función getRegion. Para obtener más información, consulta la guía de SSG.

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

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

export default async function getRegion() {
  return undefined;
}

Para componentes en caché

Habilita la resolución experimental de la configuración regional y asegúrate de que los componentes en caché reciban parámetros de configuración regional:

const nextConfig = {
  cacheComponents: true,
}

// Configuración
export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
})

// Implementación del componente
async function MyCachedComponent({locale}: {locale: string}) {
  "use cache"
  // Tu contenido internacionalizado aquí
  return <T>Content for <Var>{locale}</Var></T>
}

// Uso
export default async function Page() {
  const locale = await getLocale()
  return <MyCachedComponent locale={locale} />
}