> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Implementation avec Next.js
> Ce guide explique comment precharger avec, et comment executer le script pour garantir une experience utilisateur fluide.
Une **intégration prête pour la production** est disponible dans ce dépôt : [https://github.com/Kameleoon/setup-engine-nextjs](https://github.com/Kameleoon/setup-engine-nextjs)
Veillez à **remplacer le sitecode par le vôtre** dans [`src/integrations/Kameleoon/sitecode.ts`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/integrations/Kameleoon/sitecode.ts).
Le domaine de votre script Kameleoon peut différer entre les projets. Selon leur date de création, vos projets peuvent être hébergés sous `kameleoon.eu` ou `kameleoon.io`. Utilisez toujours le domaine affiché pour votre projet dans l'application Kameleoon.
***
## Vue d'ensemble
1. **Préchargez le moteur Kameleoon** afin que le navigateur le télécharge tôt et le mette en cache.
2. **Appliquez un CSS anti-flicker** pour masquer le contenu jusqu'à ce que le moteur soit prêt, évitant ainsi les décalages de mise en page.
3. **Exécutez le moteur après l'hydratation** pour éviter les avertissements ou désynchronisations d'hydratation React.
***
## Composants
Cette intégration utilise **deux composants** qui fonctionnent ensemble pour assurer un chargement fluide et empêcher le clignotement pendant l'hydratation.
***
### 1. `Server Component`
Placez ce composant **à l'intérieur de la balise `` de votre layout principal**.
Ses responsabilités sont :
* Injecter le CSS anti-flicker pendant le SSR pour prévenir les flashs d'interface
* Précharger le fichier `engine.js` afin que le téléchargement commence dès que possible
```css theme={null}
// ⛔ No "use client" here - must stay server-side
import { SITECODE_SRC } from "./sitecode";
const ANTIFLICKER_CSS = `
html::after {
content: '';
position: fixed;
inset: 0;
background: #fff;
z-index: 2147483647;
}`;
export function KameleoonHead() {
return (
<>
{/* Preload the engine so browser begins downloading ASAP */}
{/* Anti-flicker stylesheet injected during SSR */}
);
}
```
Voir [`KameleoonHead.tsx`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/integrations/Kameleoon/KameleoonHead.tsx)
***
### 2. `Client Component`
Placez ce composant **tout en haut de la balise ``** afin de contrôler précisément le moment d'exécution.
Ce composant :
* Supprime les styles anti-flicker après l'hydratation
* Charge dynamiquement le `engine.js` de Kameleoon
* Garantit que le script se charge sans bloquer le rendu
```javascript theme={null}
"use client";
import { useCallback, useEffect } from "react";
import { SITECODE_SRC } from "./sitecode";
export function KameleoonHydrationReady() {
const removeAntiflickerStyles = useCallback(() => {
const kameleoonLoadingTimeout = 500;
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonStartLoadTime = Date.now();
window.kameleoonDisplayPage = function (fromEngine) {
if (!fromEngine) {
window.kameleoonTimeout = true;
}
document.getElementById("kameleoonLoadingStyleSheet")?.remove();
};
window.kameleoonDisplayPageTimeOut = setTimeout(
window.kameleoonDisplayPage,
kameleoonLoadingTimeout
);
}, []);
const loadEngine = useCallback(() => {
if (document.getElementById("kameleoon-engine")) return;
const script = document.createElement("script");
script.src = SITECODE_SRC;
script.async = true;
script.id = "kameleoon-engine";
document.head.appendChild(script);
}, []);
// Execute Kameleoon after hydration
useEffect(() => {
removeAntiflickerStyles();
loadEngine();
}, [loadEngine, removeAntiflickerStyles]);
return null;
}
```
Voir [`KameleoonHydrationReady.tsx`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/integrations/Kameleoon/KameleoonHydrationReady.tsx)
> **Note :** Le timeout anti-flicker par défaut est de `500 ms`. Ajustez `kameleoonLoadingTimeout` si nécessaire.
***
## Utilisation dans `RootLayout`
Exemple de combinaison des deux composants :
```js theme={null}
export default function RootLayout({ children }) {
return (
{children}
);
}
```
Voir [`layout.tsx`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/app/layout.tsx)
***
## Points clés
* **Protection anti-flicker en SSR**
* **Exécution du script consciente de l'hydratation**
* **Chargement asynchrone du moteur**
* **Timeout de secours pour la fiabilité**
* **Aucun script bloquant**
* Fonctionne avec **les layouts Next.js, le streaming et les React Server Components**
Avec cette configuration, votre application Next.js chargera Kameleoon efficacement et évitera les problèmes liés à l'hydratation.