Generación de Sitios Estáticos
Cómo soportar la generación de sitios estáticos para tu aplicación i18n
Descripción general
Esta guía te mostrará cómo configurar tu aplicación i18n para admitir la generación de sitios estáticos.
¿Qué es la generación de sitios estáticos?
La generación de sitios estáticos (SSG) es una característica de Next.js que te permite generar páginas estáticas en tiempo de compilación. Esto es útil para el rendimiento y el SEO.
SSG para el router app
Requisitos
Hay algunos requisitos para habilitar la generación de sitios estáticos para tu aplicación i18n.
Dependiendo de si estás usando el directorio app o pages, los requisitos son ligeramente diferentes.
- Tu aplicación debe estar usando el router app de Next.js.
- Tu aplicación debe soportar enrutamiento i18n (ver enrutamiento i18n)
- Tu aplicación debe estar usando traducciones locales (ver traducciones locales)
Pasos
Paso 1:
Primero, asegúrate de que tu aplicación tenga un componente <GTProvider> en el layout raíz.
import { GTProvider } from 'gt-next';Dado que la aplicación está usando enrutamiento i18n, el proveedor debe colocarse en el archivo [locale]/layout.tsx.
Paso 2:
A continuación, asegúrate de que tu aplicación esté usando la función loadTranslations para cargar traducciones.
Además, pasa el locale como parámetro al <GTProvider>. Puedes obtener el locale del objeto params.
import { loadTranslations } from '@/i18n/loadTranslations';
import { GTProvider } from 'gt-next';
export default async function RootLayout({
children,
params,
}: {
children: React.ReactNode;
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
return (
<GTProvider loadTranslations={loadTranslations} locale={locale}>
{children}
</GTProvider>
)
}Paso 3:
Luego, asegúrate de que todos tus hooks y componentes estén importando desde gt-next/client.
import { useGT } from 'gt-next/client';
import { T } from 'gt-next/client';Esto es importante porque los hooks y componentes importados desde gt-next/client nunca leen headers, que no existen en tiempo de construcción para páginas generadas estáticamente.
¡Asegúrate de haber configurado tu aplicación Next.js para usar la función getStaticParams correctamente!
¡Eso es todo! ¡Tu aplicación ahora debería soportar generación de sitios estáticos para múltiples idiomas!
SSG para el router de pages
🚧 Esta sección está actualmente en construcción. 🚧
¿Qué te parece esta guía?