問い合わせフォームからの通知をメールだけに頼っていると、見逃しや対応遅延が発生しがちです。この記事では、Next.jsのAPI RoutesとSlack Incoming Webhooksを使って、問い合わせが来たら即座にSlackに通知が届く仕組みを構築する方法を解説します。

実際に私たちのコーポレートサイト（llc-quest.com）で運用しているコードをベースに、実装時間15分で動作するシステムを作り上げます。さらに、CRM（顧客管理システム）との連携パターンや、本番運用で役立つTipsも紹介します。

この記事で得られること

• Slack Incoming Webhooksの設定方法
• Next.js API Routeでの通知実装
• リッチな通知メッセージの作成方法（Block Kit）
• CRMとの連携アーキテクチャ
• 本番運用でのエラーハンドリング

アーキテクチャ概要

今回構築するシステムの全体像です。

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   Contact Form  │────▶│  API Route      │────▶│  Slack Channel  │
│   (React)       │     │  (Next.js)      │     │  (#inquiries)   │
└─────────────────┘     └────────┬────────┘     └─────────────────┘
                                │
                                ▼
                       ┌─────────────────┐
                       │   Supabase DB   │
                       │   (CRM Data)    │
                       └─────────────────┘

技術スタック

技術	役割	バージョン
Next.js	フロントエンド・API	14.x
TypeScript	型安全な実装	5.x
Slack Incoming Webhooks	通知送信	-
Supabase	データベース・CRM	-
Vercel	ホスティング・環境変数	-

なぜSlack Webhookを選んだか

通知手段はいくつか選択肢があります。

方法	メリット	デメリット
Slack Webhook	設定簡単、無料、リッチな表示	Slack利用が前提
メール (SendGrid等)	普遍的、受信側の設定不要	埋もれやすい、遅延あり
LINE Notify	スマホ通知が確実	2025年3月終了予定
Discord Webhook	Slack同様にリッチ	ビジネス利用は少ない

私たちはすでにSlackをチーム連絡に使っていたため、Slack Webhookを採用しました。普段使っているツールに通知が届くのが、結局一番見逃しが少ないです。

Step 1: Slack Incoming Webhooksの設定

まず、Slack側でWebhook URLを取得します。

1-1. Slack Appの作成

1. Slack API にアクセス
2. 「Create New App」→「From scratch」を選択
3. App名（例: 問い合わせ通知）とワークスペースを選択

1-2. Bot Userの設定

Slack Appを作成したら、Bot Userを設定します。

1. 左メニュー「App Home」をクリック
2. 「Your App's Presence in Slack」セクションで「Edit」をクリック
3. Display Name: 問い合わせ通知
4. Default username: inquiry-notify
5. 「Save」をクリック

1-3. OAuth Scopeの追加

1. 左メニュー「OAuth & Permissions」をクリック
2. 「Scopes」セクションの「Bot Token Scopes」で「Add an OAuth Scope」
3. incoming-webhook を追加

1-4. Webhook URLの取得

1. 左メニュー「Incoming Webhooks」をクリック
2. 「Activate Incoming Webhooks」をOnにする
3. 「Add New Webhook to Workspace」をクリック
4. 通知先チャンネル（例: #問い合わせ）を選択
5. 「許可する」をクリック
6. Webhook URLをコピー

取得したURLは以下のような形式です:

https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX

⚠️ セキュリティ注意: このURLは秘密情報です。GitHubにコミットしないよう、必ず環境変数で管理してください。

Step 2: 環境変数の設定

ローカル開発環境

.env.local に追加:

SLACK_WEBHOOK_URL=https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX

Vercel（本番環境）

Vercel CLIを使う場合:

echo "https://hooks.slack.com/services/..." | vercel env add SLACK_WEBHOOK_URL production

または、Vercelダッシュボードから:

1. プロジェクト設定 → Environment Variables
2. SLACK_WEBHOOK_URL を追加
3. Production環境にチェック

Step 3: API Routeの実装

ここからが本実装です。問い合わせフォームの送信を受け取り、Slackに通知するAPI Routeを作成します。

3-1. ファイル構成

app/
├── api/
│   └── inquiries/
│       └── create/
│           └── route.ts  ← 今回作成するファイル
└── contact/
    ├── page.tsx
    └── ContactForm.tsx

3-2. Slack通知関数

まず、Slack Webhookに通知を送る関数を実装します。

// app/api/inquiries/create/route.ts

// Slack通知を送信する関数
async function sendSlackNotification(data: {
  customerName: string;
  companyName: string;
  email: string;
  phone?: string;
  service?: string;
  inquiryType?: string;
  message?: string;
}) {
  const webhookUrl = process.env.SLACK_WEBHOOK_URL;

  // 環境変数が設定されていない場合はスキップ
  if (!webhookUrl) {
    console.log("[Slack] SLACK_WEBHOOK_URL not configured, skipping notification");
    return;
  }

  // Slack Block Kit形式でメッセージを構築
  const blocks = [
    {
      type: "header",
      text: {
        type: "plain_text",
        text: "📩 新規お問い合わせ",
        emoji: true,
      },
    },
    {
      type: "section",
      fields: [
        {
          type: "mrkdwn",
          text: "*お名前:*\n" + (data.customerName || "未入力"),
        },
        {
          type: "mrkdwn",
          text: "*会社名:*\n" + (data.companyName || "未入力"),
        },
        {
          type: "mrkdwn",
          text: "*メール:*\n" + (data.email || "未入力"),
        },
        {
          type: "mrkdwn",
          text: "*電話:*\n" + (data.phone || "未入力"),
        },
      ],
    },
  ];

  try {
    const response = await fetch(webhookUrl, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ blocks }),
    });

    if (response.ok) {
      console.log("[Slack] Notification sent successfully");
    } else {
      console.error("[Slack] Failed to send notification:", response.status);
    }
  } catch (error) {
    console.error("[Slack] Error sending notification:", error);
  }
}

まとめ

この記事では、Next.js × Slack Webhookで問い合わせ通知システムを構築する方法を解説しました。

実装のポイント:

• Slack Incoming Webhooksで簡単に通知連携
• Block Kitでリッチな通知メッセージ
• 非同期実行でAPIレスポンスに影響させない
• 環境変数で本番/開発を切り替え

所要時間と費用:

• 実装時間: 約15分
• 追加費用: 0円（Slack無料プランで十分）

問い合わせの見逃しは、ビジネスにとって大きな機会損失です。この仕組みを導入することで、問い合わせへの初動を大幅に短縮できます。

ぜひ、自社のサイトにも導入してみてください。

参考リンク

• Slack Incoming Webhooks
• Slack Block Kit
• Next.js Route Handlers
• Vercel Environment Variables

---

著者: てんちょー（合同会社QUEST 代表）

普段はSIerで経営企画部員として働きながら、週末起業で高校時代の友人と共同創業。Claude Codeを活用した業務効率化・システム開発を得意としています。

🌐 コーポレートサイト: https://llc-quest.com 🐦 Twitter (X): https://x.com/questceo_ai