> ## 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.
# Next.js での実装
> このガイドでは、スムーズなユーザー体験を保証するために、 を と一緒にプリロードし、 スクリプトを 実行する方法を説明します。
**本番環境向けの統合** はこのリポジトリで利用可能です: [https://github.com/Kameleoon/setup-engine-nextjs](https://github.com/Kameleoon/setup-engine-nextjs)
[`src/integrations/Kameleoon/sitecode.ts`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/integrations/Kameleoon/sitecode.ts) で **必ず sitecode を独自のものに置き換えてください**。
Kameleoon スクリプトのドメインはプロジェクトによって異なる場合があります。作成日に応じて、プロジェクトは `kameleoon.eu` または `kameleoon.io` のいずれかでホストされる可能性があります。常に Kameleoon App でプロジェクトに表示されているドメインを使用してください。
***
## 概要
1. **Kameleoon エンジンをプリロード** して、ブラウザが早期にダウンロードしキャッシュするようにします。
2. **アンチフリッカー CSS を適用** してエンジンの準備が整うまでコンテンツを非表示にし、レイアウトシフトを防ぎます。
3. **ハイドレーション後にエンジンを実行** して、React のハイドレーション警告や不整合を回避します。
***
## コンポーネント
この統合では、スムーズな読み込みを保証し、ハイドレーション中のちらつきを防ぐために連携する **2つのコンポーネント** を使用します。
***
### 1. `Server Component`
このコンポーネントは **メインレイアウトの `` 内** に配置してください。
その責務は以下のとおりです:
* SSR 中にアンチフリッカー CSS を注入して UI のちらつきを防ぐ
* できるだけ早くダウンロードが開始されるよう `engine.js` ファイルをプリロードする
```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 */}
);
}
```
[`KameleoonHead.tsx`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/integrations/Kameleoon/KameleoonHead.tsx) を参照してください。
***
### 2. `Client Component`
このコンポーネントは、実行タイミングを正確に制御するために **`` の最上部** に配置してください。
このコンポーネントは:
* ハイドレーション後にアンチフリッカースタイルを削除します
* Kameleoon の `engine.js` を動的に読み込みます
* スクリプトがレンダリングをブロックせずに読み込まれるようにします
```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;
}
```
[`KameleoonHydrationReady.tsx`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/integrations/Kameleoon/KameleoonHydrationReady.tsx) を参照してください。
> **注:** デフォルトのアンチフリッカータイムアウトは `500 ms` です。必要に応じて `kameleoonLoadingTimeout` を調整してください。
***
## `RootLayout` での使用
両方のコンポーネントを組み合わせる例:
```js theme={null}
export default function RootLayout({ children }) {
return (
{children}
);
}
```
[`layout.tsx`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/app/layout.tsx) を参照してください。
***
## 重要なポイント
* **SSR でのアンチフリッカー保護**
* **ハイドレーションを認識したスクリプト実行**
* **非同期エンジン読み込み**
* **信頼性のためのフォールバックタイムアウト**
* **ブロッキングスクリプトなし**
* **Next.js レイアウト、ストリーミング、React Server Components** で動作
このセットアップにより、Next.js アプリケーションは Kameleoon を効率的に読み込み、ハイドレーション関連の問題を回避します。