問い合わせフォーム→Discord自動通知の作り方
Next.js×Webhook実践ガイド

// src/components/ContactForm.tsx

'use client';
import { useState } from 'react';

export default function ContactForm() {
  const [form, setForm] = useState({
    name: '', company: '', email: '', message: ''
  });
  const [status, setStatus] = useState<
    'idle' | 'sending' | 'sent' | 'error'
  >('idle');
  const [errors, setErrors] = useState<Record<string, string>>({});

  // バリデーション
  function validate() {
    const e: Record<string, string> = {};
    if (!form.name.trim()) e.name = 'お名前は必須です';
    if (!form.email.trim()) e.email = 'メールアドレスは必須です';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
      e.email = '正しいメールアドレスを入力してください';
    if (!form.message.trim()) e.message = 'ご相談内容は必須です';
    return e;
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const v = validate();
    if (Object.keys(v).length > 0) {
      setErrors(v);
      return;
    }
    setErrors({});
    setStatus('sending');

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error();
      setStatus('sent');
    } catch {
      setStatus('error');
    }
  }

  if (status === 'sent') {
    return (
      <div className="text-center py-12">
        <p className="text-2xl mb-2">✅</p>
        <p className="font-bold">送信完了しました！</p>
        <p className="text-sm text-gray-500">
          通常1営業日以内にご連絡いたします。
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-1">
          お名前 <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          value={form.name}
          onChange={e => setForm({...form, name: e.target.value})}
          className="w-full border rounded-lg px-4 py-2"
        />
        {errors.name && (
          <p className="text-red-500 text-xs mt-1">{errors.name}</p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium mb-1">
          会社名・屋号（任意）
        </label>
        <input
          type="text"
          value={form.company}
          onChange={e => setForm({...form, company: e.target.value})}
          className="w-full border rounded-lg px-4 py-2"
        />
      </div>

      <div>
        <label className="block text-sm font-medium mb-1">
          メールアドレス <span className="text-red-500">*</span>
        </label>
        <input
          type="email"
          value={form.email}
          onChange={e => setForm({...form, email: e.target.value})}
          className="w-full border rounded-lg px-4 py-2"
        />
        {errors.email && (
          <p className="text-red-500 text-xs mt-1">{errors.email}</p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium mb-1">
          ご相談内容 <span className="text-red-500">*</span>
        </label>
        <textarea
          rows={5}
          value={form.message}
          onChange={e => setForm({...form, message: e.target.value})}
          className="w-full border rounded-lg px-4 py-2"
        />
        {errors.message && (
          <p className="text-red-500 text-xs mt-1">{errors.message}</p>
        )}
      </div>

      <button
        type="submit"
        disabled={status === 'sending'}
        className="w-full bg-primary text-white font-bold
                   py-3 rounded-lg hover:bg-primary/90
                   disabled:opacity-50"
      >
        {status === 'sending' ? '送信中...' : '無料で相談する →'}
      </button>
    </form>
  );
}

// src/app/api/contact/route.ts

import { NextRequest, NextResponse } from 'next/server';

// 環境変数からWebhook URLを取得
const WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL || '';

export async function POST(req: NextRequest) {
  try {
    const { name, company, email, message } = await req.json();

    // 必須チェック（サーバーサイド）
    if (!name || !email || !message) {
      return NextResponse.json(
        { error: '必須項目を入力してください' },
        { status: 400 }
      );
    }

    // Discord Embed形式でメッセージを組み立て
    const fields = [
      { name: 'お名前', value: name, inline: true },
      { name: 'メール', value: email, inline: true },
    ];
    if (company) {
      fields.push({
        name: '会社名・屋号', value: company, inline: true
      });
    }
    fields.push({
      name: 'ご相談内容', value: message, inline: false
    });

    const discordMessage = {
      embeds: [{
        title: '📩 新規お問い合わせ',
        color: 0x00d4ff,   // 水色
        fields,
        timestamp: new Date().toISOString(),
      }],
    };

    // Discord Webhookに送信
    const res = await fetch(WEBHOOK_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(discordMessage),
    });

    if (!res.ok) {
      console.error('Webhook error:', await res.text());
      return NextResponse.json(
        { error: '送信に失敗しました' },
        { status: 500 }
      );
    }

    return NextResponse.json({ ok: true });
  } catch (e) {
    console.error('Contact API error:', e);
    return NextResponse.json(
      { error: 'サーバーエラー' },
      { status: 500 }
    );
  }
}