Descripción general

gt-next 6.10.0 introduce compatibilidad experimental con componentes en caché y marca como obsoletas las funciones de solicitud estática heredadas de gt-next@6.9.

• Se añadió compatibilidad experimental con componentes en caché con experimentalLocaleResolution
• Se marcaron como obsoletas las funciones de solicitud estática heredadas de gt-next@6.9

Componentes en caché

Para habilitar la compatibilidad con componentes en caché, agrega experimentalLocaleResolution: true a tu configuración de gt-next y sigue la guía de NextJS Cache Components. Cuando uses componentes en caché con contenido traducible, debes pasar el locale como parámetro para garantizar una invalidación correcta de la caché entre diferentes locales.

Considera la siguiente 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>Contenido en caché</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 almacenados en caché usan sus parámetros como claves de caché; cualquier componente en caché que contenga contenido traducible debe aceptar un parámetro locale para poder actualizarse cuando cambie el locale de un usuario. Por ejemplo, CachedContent debe aceptar un parámetro locale para crear entradas de caché separadas para cada locale. Sin este parámetro, el componente serviría el mismo contenido en caché independientemente del locale del usuario.

Notas de configuración

Cuando experimentalLocaleResolution está habilitado:

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

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

Deprecación de las funciones de solicitud estáticas heredadas

Tras la incorporación de compatibilidad con el renderizado estático en gt-next@6.9, ahora estamos deprecando las funciones de solicitud estáticas heredadas (getStaticLocale, getStaticRegion, getStaticDomain) en favor de las funciones de solicitud estándar (getLocale, getRegion, getDomain).

Esta deprecación está alineada con nuestro objetivo de simplificar la superficie del API manteniendo toda la funcionalidad. Las funciones estáticas heredadas seguirán funcionando, pero emitirán advertencias de deprecación. Recomendamos migrar a las funciones de solicitud estándar para mantener la coherencia.

Guía de migración

SSG heredado

Reemplaza las funciones obsoletas de solicitudes estáticas:

// Antes (obsoleto)
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, en su lugar, utiliza funciones personalizadas getLocale, getRegion o getDomain. Debes agregar una función personalizada getLocale 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 locale y asegúrate de que los componentes en caché reciban el locale como parámetro:

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} />
}