Génération de site statique
Comment prendre en charge la génération de site statique pour votre application i18n
Aperçu
Ce guide vous montrera comment configurer votre application i18n pour prendre en charge la génération de site statique.
Qu'est-ce que la génération de site statique ?
La génération de site statique (SSG) est une fonctionnalité de Next.js qui vous permet de générer des pages statiques au moment de la construction. Ceci est utile pour les performances et le référencement.
SSG pour le routeur app
Exigences
Il y a quelques exigences pour activer la génération de site statique pour votre application i18n.
Selon que vous utilisez le répertoire app ou pages, les exigences sont légèrement différentes.
- Votre application doit utiliser le routeur app de Next.js.
- Votre application doit prendre en charge le routage i18n (voir routage i18n)
- Votre application doit utiliser des traductions locales (voir traductions locales)
Étapes
Étape 1 :
Tout d'abord, assurez-vous que votre application a un composant <GTProvider> dans la mise en page racine.
import { GTProvider } from 'gt-next';Puisque l'application utilise le routage i18n, le fournisseur doit être placé dans le fichier [locale]/layout.tsx.
Étape 2 :
Ensuite, assurez-vous que votre application utilise la fonction loadTranslations pour charger les traductions.
De plus, passez la locale en tant que paramètre au <GTProvider>. Vous pouvez obtenir la locale à partir de l'objet 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>
)
}Étape 3 :
Ensuite, assurez-vous que tous vos hooks et composants importent depuis gt-next/client.
import { useGT } from 'gt-next/client';
import { T } from 'gt-next/client';Ceci est important car les hooks et composants importés depuis gt-next/client ne lisent jamais les en-têtes, qui n'existent pas au moment de la construction pour les pages générées statiquement.
Assurez-vous d'avoir configuré votre application Next.js pour utiliser correctement la fonction getStaticParams !
C'est tout ! Votre application devrait maintenant prendre en charge la génération de site statique pour plusieurs langues !
SSG pour le routeur pages
🚧 Cette section est actuellement en cours de construction. 🚧
Comment trouvez-vous ce guide ?