Componentes de caché
Configuración de componentes de caché en gt-next
Cache Components
En esta guía se muestra cómo usar gt-next con Cache Components de Next.js para optimizar aplicaciones internacionalizadas.
Configuración
Si aún no lo has hecho, sigue la guía de Next.js Cache Components para configurar cache components en tu proyecto.
Habilita la compatibilidad con cache components en tu configuración de gt-next:
const nextConfig = {
cacheComponents: true,
}
export default withGTConfig(nextConfig, {
experimentalLocaleResolution: true,
})Habilita el middleware
Consulta la guía completa de middleware aquí.
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware();
export const config = {
// Coincide con todas las rutas excepto las de la API, los archivos estáticos y los internos de Next.js
matcher: ['/((?!api|static|.*\\..*|_next).*)']
};Agrega el parámetro locale a los componentes en caché con contenido traducible
Cuando uses componentes en caché con contenido traducible, debes pasar el locale como parámetro. Esto garantiza que cada locale tenga su propia entrada de caché.
import { getLocale } from "gt-next/server"
async function CachedContent({locale}: {locale: string}) {
"use cache"
return <T>Hola mundo</T>
}
export default async function Page() {
const locale = await getLocale()
return <CachedContent locale={locale} />
}Notas de configuración
- Las funciones personalizadas de
getLocalese sobrescriben - Las funciones
getRegionygetDomainestán deshabilitadas - Puedes personalizar el name del parámetro locale utilizado para la resolución con
experimentalLocaleResolutionParam(por defecto'locale')
export default withGTConfig(nextConfig, {
experimentalLocaleResolution: true,
experimentalLocaleResolutionParam: 'lang', // Personalización opcional
})Siguientes pasos
- Consulta las notas de la versión de esta funcionalidad, gt-next@6.10.0, para obtener más información.
¿Qué te parece esta guía?