This project includes a production-ready integration of Kameleoon engine with Next.js App Router, optimized for no flicker, lazy engine loading, and SSR compatibility.
- Anti-flicker protection on SSR
- Hydration-aware script execution
- Asynchronous engine loading
- Fallback timeout for reliability
- No blocking scripts
- Works with Next.js layouts, streaming, and React Server Components
├─ app/
│ ├─ layout.tsx # Root layout (App Router)
│ └─ page.tsx # Main page
│
└─ integrations/
└─ Kameleoon/
├─ KameleoonHead.tsx # SSR anti-flicker + preload
├─ KameleoonHydrationReady.tsx # Client script loader (after hydration)
└─ sitecode.ts # Kameleoon engine URL config
integrations/Kameleoon/
Open:
integrations/Kameleoon/sitecode.ts
Replace SITECODE with your actual site code:
Add integration to app/layout.tsx
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<KameleoonHead />
</head>
<body className={inter.className}>
<KameleoonHydrationReady />
{children}
</body>
</html>
);
}