# next.jsのサイトにライブチャットを入れる
SpookatのチャットをNext.jsアプリに追加します。App RouterでもPages Routerでも、デザインやログイン中のユーザーも渡せて、クリック前に当社APIへのリクエストが0件であることを確認できます。
2026-11-04 · Kuba
Next.jsでのライブチャットは、ルートレイアウトのscriptタグ1つです。このガイドでは、App RouterとPages Routerでのタグの置き場所、読み込み順を崩さずにウィジェットのデザインやログイン中のユーザーを渡す方法、Content Security Policyに追加すべきもの、そして本番ビルドでの確認方法を紹介します。
## 手短に言うと
App Routerでは、`app/layout.tsx`の``内にタグを追加します。
```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`YOUR_SITE_KEY`は、ダッシュボードのインストールページにあるキーに置き換えてください。デザインをダッシュボードで管理する場合(これが既定です)、インストールはこれだけです。このガイドの残りは、もっと細かく制御したい場合の話です。ゼロから始めるなら、アカウント側の手順は[基本ガイド](/ja/blog/add-live-chat-to-your-website/)にあります。
## なぜルートレイアウトなのか
ルートレイアウトはすべてのルートを包み、ユーザーがページを移動してもマウントされたままです。ランチャーはページに一度だけ取り付きます。クライアント側のナビゲーションではページが再読み込みされないので、ランチャーも再読み込みされず、訪問者はあちこちクリックしながら会話を開いたままにできます。
タグをページコンポーネントに置くと、チャットはそのページにしか存在しません。複数のページで描画されるコンポーネントに置くと、ハードリロードで重複します(ランチャーは自分の2つ目のコピーを無視しますが、無駄なリクエストであることに変わりはありません)。
## next/scriptを使う
`next/script`は、Next.jsでサードパーティのスクリプトを読み込む方法で、ここでも問題なく使えます。
```tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`afterInteractive`はハイドレーション直後にランチャーを読み込みます。`lazyOnload`はブラウザがアイドルになるまで待つので、遅いスマートフォンではボタンの表示が少し遅れます。2 kbのランチャーならどちらでも構いませんが、`afterInteractive`のほうがボタンが早く出ます。ランチャーに`beforeInteractive`は使わないでください。無意味にあなたのコードと競合します。
## デザインをコードで設定する
ダッシュボードで公開したデザインはランチャーの中に含まれます。リポジトリで管理したい場合は、ランチャーが実行される前に`window.Spookat`を設定してください。ページ側の設定がダッシュボードより優先されます。
読み込み順が大事です。ランチャーが実行される時点で設定が存在していなければなりません。`next/script`なら、設定には`beforeInteractive`(ルートレイアウトで使用可)を、ランチャーには`afterInteractive`を指定します。
```tsx
import Script from "next/script";
const spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`beforeInteractive`のスクリプトはハイドレーション前、`afterInteractive`のものは後に実行されるので、順番は保証されます。キーはほかの場所と同じです。`style`(8種類のどれか)、`font`、`accent`、`side`、`greeting`、`label`、`lang`。すべて[ドキュメント](/ja/docs/)に載っています。
## pages router
Pages Routerでは、共通のラッパーは`pages/_app.tsx`です。
```tsx
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
設定を使う場合、Pages Routerでは`beforeInteractive`のスクリプトは`pages/_document.tsx`に置きます。`window.Spookat`のスクリプトをそこの``内に、上と同じ`id`と`strategy`で置き、ランチャーは`_app.tsx`に残してください。
## ログイン中のユーザー
pro以上では、誰がログインしているかをチャットに伝えられます。するとチームには、Slackのカードに`logged in as 42`と表示され、Webhook、エクスポート、エージェントの`read_convo`にもそのidが含まれます。idはあなたのサーバーだけが知るシークレットで署名されるので、誰かがほかの人になりすますことはできません。
ダッシュボードのインストールページでIDシークレットを作成し、環境変数に入れ、サーバー側で署名します。App Routerではルートレイアウトがサーバーコンポーネントなので、簡単です。
```tsx
import { createHmac } from "node:crypto";
import Script from "next/script";
import { getSession } from "@/lib/auth"; // yours
const sign = (id: string) => createHmac("sha256", process.env.SPOOKAT_IDENTITY_SECRET!).update(id).digest("hex");
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const session = await getSession();
const user = session ? { id: String(session.userId), sig: sign(String(session.userId)) } : undefined;
return (
{children}
{user && (
)}
);
}
```
署名は決してクライアントコンポーネントで計算しないでください。シークレットがブラウザに送られてしまいます。署名がない、または間違っていてもエラーにはならず、チャットが誰なのかを表示しないだけです。ルートレイアウトでセッションを読むと、すべてのページがリクエストごとに描画されるようになります。今レイアウトが静的なら、追加する前によく検討してください。
## content security policy
アプリが`Content-Security-Policy`ヘッダーを送っているなら、ウィジェットには次が必要です。
- `script-src`と`style-src`:`https://cdn.spookat.com`
- `font-src`:ホスト済みフォントを選んだ場合は`https://cdn.spookat.com`
- `connect-src`:クリック後のチャット接続用に`wss://api.spookat.com`
- `img-src`:ロゴとチームメンバーの写真用に`data:`
- `style-src`:ランチャーは自分のshadow rootに小さな`