メインコンテンツへスキップ
本番環境向けの統合 はこのリポジトリで利用可能です: https://github.com/Kameleoon/setup-engine-nextjs src/integrations/Kameleoon/sitecode.ts で 必ず sitecode を独自のものに置き換えてください。
Kameleoon スクリプトのドメインはプロジェクトによって異なる場合があります。作成日に応じて、プロジェクトは kameleoon.eu または kameleoon.io のいずれかでホストされる可能性があります。常に Kameleoon App でプロジェクトに表示されているドメインを使用してください。

​
概要​

  1. Kameleoon エンジンをプリロード して、ブラウザが早期にダウンロードしキャッシュするようにします。
  2. アンチフリッカー CSS を適用 してエンジンの準備が整うまでコンテンツを非表示にし、レイアウトシフトを防ぎます。
  3. ハイドレーション後にエンジンを実行 して、React のハイドレーション警告や不整合を回避します。

​
コンポーネント​

この統合では、スムーズな読み込みを保証し、ハイドレーション中のちらつきを防ぐために連携する 2つのコンポーネント を使用します。

​
1. Server Component​

このコンポーネントは メインレイアウトの <head> 内 に配置してください。 その責務は以下のとおりです:
  • SSR 中にアンチフリッカー CSS を注入して UI のちらつきを防ぐ
  • できるだけ早くダウンロードが開始されるよう engine.js ファイルをプリロードする
// ⛔ 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 */}
            <link rel="preload" href={SITECODE_SRC} as="script" fetchPriority="high" />
            {/* Anti-flicker stylesheet injected during SSR */}
            <style
                id="kameleoonLoadingStyleSheet"
                suppressHydrationWarning
                dangerouslySetInnerHTML={{ __html: ANTIFLICKER_CSS }}
            />
        </>
    );
}
KameleoonHead.tsx を参照してください。

​
2. Client Component​

このコンポーネントは、実行タイミングを正確に制御するために <body> の最上部 に配置してください。 このコンポーネントは:
  • ハイドレーション後にアンチフリッカースタイルを削除します
  • Kameleoon の engine.js を動的に読み込みます
  • スクリプトがレンダリングをブロックせずに読み込まれるようにします
"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 を参照してください。
注: デフォルトのアンチフリッカータイムアウトは 500 ms です。必要に応じて kameleoonLoadingTimeout を調整してください。

​
RootLayout での使用​

両方のコンポーネントを組み合わせる例: 
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <head>
                <KameleoonHead />
            </head>
            <body className={inter.className}>
                <KameleoonHydrationReady />
                {children}
            </body>
        </html>
    );
}
layout.tsx を参照してください。

​
重要なポイント​

  • SSR でのアンチフリッカー保護
  • ハイドレーションを認識したスクリプト実行
  • 非同期エンジン読み込み
  • 信頼性のためのフォールバックタイムアウト
  • ブロッキングスクリプトなし
  • Next.js レイアウト、ストリーミング、React Server Components で動作
このセットアップにより、Next.js アプリケーションは Kameleoon を効率的に読み込み、ハイドレーション関連の問題を回避します。