Next.js チャットボット：next/script でAIチャットボットを追加する方法（App Router・Pages Router）

• Nexoply のアカウント。無料で登録できます。無料プランには月50会話が含まれ、カードは不要です。
• Nexoply に登録したビジネス情報：サービスと料金、よくある質問、ポリシー、営業時間、対応エリア。最も手早いのは、ウェブサイトのアドレスを入力して Nexoply に公開ページ（JavaScript で描画されるページを含む）を取り込ませる方法です。提案内容を確認し、承認するまで何も追加されません。
• チャットボットのキー。ダッシュボードで チャットボット を開きます（まだの場合は チャットボットを作成 をクリック）。そこにある設置コードの data-chatbot 属性にキーが含まれています。

通常の HTML サイトなら、設置コードを </body> の前に貼り付けるだけです。

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

Next.js では HTML を直接編集しないため、代わりに組み込みの next/script コンポーネントで同じスクリプトを追加します。キーは公開情報で、ウィジェットがどのビジネスのものかを示すだけです。

ルートレイアウトはすべてのページを包むため、ここにスクリプトを追加するとサイト全体にチャットが表示されます。next/script から Script をインポートし、<body> 内の {children} の後に置きます。

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Nexoply チャットウィジェット：ハイドレーション後にブラウザで読み込まれる */}
        <Script
          src="https://nexoply.com/widget.js"
          data-chatbot={process.env.NEXT_PUBLIC_NEXOPLY_KEY}
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

次に、キーを環境変数に設定します。NEXT_PUBLIC_ という接頭辞を付けると、Next.js はその値をブラウザ用のバンドルに含めます。キーは秘密ではないので、ここではそれで問題ありません。

# .env.local（git にはコミットしない）
NEXT_PUBLIC_NEXOPLY_KEY=YOUR-KEY

Pages Router では pages/_app.tsx がすべてのページを包むため、同じ <Script> を <Component {...pageProps} /> の隣に置きます。.env.local の変数も同じものを使います。

// pages/_app.tsx
import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://nexoply.com/widget.js"
        data-chatbot={process.env.NEXT_PUBLIC_NEXOPLY_KEY}
        strategy="afterInteractive"
      />
    </>
  );
}

プロジェクトで両方のルーターを併用している場合は、app/layout.tsx と pages/_app.tsx の両方にスクリプトを追加します。2回読み込まれても問題ありません。ウィジェットはチャットボットのキーごとに一度しか表示されません。

React チャットボットコンポーネントのガイドのように <Chatbot /> コンポーネントにしたい場合は、Script を別ファイルに移します。onLoad などのイベントハンドラーを渡さなければ next/script は Server Components でも動作するため、このファイルに "use client" は不要です。

// components/Chatbot.tsx
import Script from "next/script";

export function Chatbot() {
  return (
    <Script
      src="https://nexoply.com/widget.js"
      data-chatbot={process.env.NEXT_PUBLIC_NEXOPLY_KEY}
      strategy="afterInteractive"
    />
  );
}

あとは app/layout.tsx の <body> 内の {children} の後、または pages/_app.tsx の <Component {...pageProps} /> の隣で <Chatbot /> を描画します。すべてのルートで読み込まれるよう、個別のページではなくレイアウトで描画してください。

strategy="afterInteractive" は、ページが操作可能になった直後にウィジェットを読み込むため、チャットボタンがすぐに表示されます。strategy="lazyOnload" は、ブラウザがアイドル状態になり、ほかのすべてが読み込まれるまで待ちます。初回の読み込みをできるだけ軽くしたく、ボタンが少し遅れて表示されてもかまわない場合はこちらを選んでください。どちらも、スクリプトをクリティカルレンダリングパスから外します。詳しくは next/script のドキュメントをご覧ください。

• クライアント側のナビゲーション。 訪問者が <Link> やルーターでページを移動しても会話は開いたままで、URL が変わるとページルールが再確認されます。追加のコードは不要です。
• SSR とハイドレーションでも安全。 ブラウザでのみ動作し、React がハイドレーションするマークアップの外、document.body 上に表示されるため、ハイドレーションの不一致を起こしません。
• Shadow DOM。 Tailwind やグローバル CSS はチャットに影響せず、チャットのスタイルもアプリに影響しません。再レンダリングで消えることもありません。
• StrictMode と Fast Refresh。 開発中にエフェクトが2回実行されても、ホットリロードが起きても、チャットが2つになることはありません。キーごとに一度だけ表示されます。
• ストレージ。 Cookie は使いません。匿名の訪問者IDに localStorage を、現在の会話に sessionStorage を使います。

Next.js なら独自のチャットボットを作るのも難しくなく、それが正しい選択になる場合もあります。2つの方法は、それぞれ別の用途に向いています。

• 自作する 場合は、チャットUIライブラリか独自のコンポーネントに加え、自分のAPIキーでAIモデルを呼び出す Route Handler か API ルートを用意します。回答のもとになるコンテンツ、会話の保存、不正利用対策も自分で管理します。ユーザー自身のデータを扱うアシスタントなど、チャットが自社製品の一部である場合に向いています。
• ホスト型AIチャットボット（Nexoply など）は、UI、AI、バックエンドをまとめて提供します。追加または取り込んだビジネス情報（サービスと料金、よくある質問、ポリシー、営業時間）だけをもとに訪問者の質問に答え、わからないときはそう伝えます。AIキーは不要で、あなたのサーバーでは何も動きません。会話、回答できなかった質問、スパム対策はダッシュボードで管理できます。ビジネスについての質問に答える必要がある、顧客向けのウェブサイトに向いています。

インターフェースとモデルを完全に制御したいなら、自作しましょう。バックエンドを運用せずに訪問者の質問に答えることが目的なら、ホスト型ウィジェットのほうが手間がかかりません。Nexoply がビジネス情報をもとに答える仕組みもご覧ください。

ヒーローや料金のセクションに「チャットで質問する」ボタンを置きたい場合は、window で nexoply:open-chat イベントを発行します。onClick を使うため、クライアントコンポーネントにする必要があります。

"use client";
// components/ChatButton.tsx

export function ChatButton() {
  return (
    <button
      type="button"
      // Nexoply のチャットウィンドウを開く
      onClick={() => window.dispatchEvent(new Event("nexoply:open-chat"))}
    >
      チャットで質問する
    </button>
  );
}

<ChatButton /> は、どのページやサーバーコンポーネントでも使えます。読み込み後にウィジェットを削除する API はありません。一部のページ（/checkout など）でメッセージボタンを非表示にするには、チャットボット → カスタマイズ → メッセージボタン → 一部のページで変更 で「ボタンなし」のページルールを追加してください。

next dev を実行して http://localhost:3000 を開くと、隅にチャットボタンが表示されます。「週末も営業していますか？」のような実際の質問をすると、数秒でダッシュボードの 会話 に表示されます。ダッシュボードでの変更は、再デプロイなしで約1分でサイトに反映されます。

アプリが Content-Security-Policy ヘッダーを送信している場合（ミドルウェアや next.config から送るなど）は、次の項目で Nexoply を許可します。

• script-src https://nexoply.com：widget.js の読み込み用。
• connect-src https://nexoply.com：チャットのリクエスト用。
• img-src https://nexoply.com：ロゴやボタンのアイコンなどの画像用。

• ボタンが表示されず、ページのソースで data-chatbot が空になっている。 環境変数が読み込まれていません。NEXT_PUBLIC_ の接頭辞を確認して next dev を再起動し、ホスティング先でも変数を追加して再デプロイしてください。
• スクリプトがレイアウトではなく個別のページにある。 すべてのルートで読み込まれるよう、app/layout.tsx または pages/_app.tsx に置いてください。
• タグが変更されている。 タグには data-chatbot 属性と、widget.js を含む src が必要です。
• CSP や許可するウェブサイトでブロックされている。 ブラウザのコンソールでエラーを確認し、上の2つのセクションを見直してください。
• チャットボットがオフ。 チャットボットを有効にする のスイッチがオンになっているか確認します。
• 広告ブロッカー。 まれに、拡張機能がチャットウィジェットをブロックすることがあります。拡張機能なしのプライベートウィンドウで試してください。

動作を確認できたら、チャットボット → カスタマイズ でサイトに合わせましょう。ボタンのアイコン、ラベル、色、位置を変えたり、画面の端にサイドタブ（「ヘルプ」など）を表示したりできます。スマートフォンでは別のデザインにでき、特定のページにはページルールを設定できます（/pricing だけにサイドタブを表示するなど）。カスタマイズのオプション一覧とアシスタントがビジネスを学ぶ仕組みをご覧いただくか、プランと会話数の上限を比較してください。React チャットボットコンポーネントのガイドやVue・Nuxt チャットボットガイドもあります。