Amazon SESでメールを送受信する

{
  "Template": {
    "TemplateName": "test-template-1",
    "SubjectPart": "{{name}}様 / HPからのお問い合わせです。",
    "HtmlPart": "<h1>こんにちは、{{name}}さん！</h1><p>あなたのコードは <b>{{code}}</b> です。</p>",
    "TextPart": "これはテキストメールです。\nコード: {{code}}"
  }
}

PS C:\Users\hiro\OneDrive\Desktop\ses\aa\email-template> aws ses get-template --template-name test-template-1 --region us-east-1
{
    "Template": {
        "TemplateName": "test-template-1",
        "SubjectPart": "{{name}}様 / HPからのお問い合わせです。",
        "TextPart": "これはテキストメールです。\nコード: {{code}}",
        "HtmlPart": "<h1>こんにちは、{{name}}さん！</h1><p>あなたのコードは <b>{{code}}</b> です。</p>"
    }
}

"use client";

import { useState } from "react";

export default function Home() {
  const [form, setForm] = useState({ name: "", email: "", code: "" });
  const [status, setStatus] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus(null);

    const res = await fetch("/api/send", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(form),
    });

    const data = await res.json();
    setStatus(data.message);
  };

  return (
    <div style={{ padding: "2rem", width: "40%", backgroundColor: "skyblue" }}>
      <h1>お問い合わせふぉーむ</h1>
      <form
        onSubmit={handleSubmit}
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "4rem",
          marginTop: "2rem",
        }}
      >
        <input
          type="text"
          placeholder="お名前"
          value={form.name}
          onChange={(e) => setForm({ ...form, name: e.target.value })}
          required
          style={{ border: "1px solid" }}
        />
        <input
          type="email"
          placeholder="メールアドレス"
          value={form.email}
          onChange={(e) => setForm({ ...form, email: e.target.value })}
          required
          style={{ border: "1px solid" }}
        />
        <textarea
          placeholder="コード"
          value={form.code}
          onChange={(e) => setForm({ ...form, code: e.target.value })}
          required
          style={{ border: "1px solid" }}
        />
        <button
          type="submit"
          style={{
            border: "1px solid",
            padding: "1rem",
            width: "40%",
            backgroundColor: "white",
          }}
        >
          送信
        </button>
        {status && <p>{status}</p>}
      </form>
    </div>
  );
}

import { SESClient, SendTemplatedEmailCommand } from "@aws-sdk/client-ses";
import { NextRequest, NextResponse } from "next/server";

const ses = new SESClient({
  region: process.env.AWS_REGION,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
  },
});

export async function POST(req: NextRequest) {
  if (req.method !== "POST") return NextResponse.json({ nice: "Nice" });

  const { name, code, email } = await req.json();

  const command = new SendTemplatedEmailCommand({
    Source: process.env.SES_FROM_EMAIL!,
    Destination: {
      ToAddresses: [email],
    },
    Template: "test-template-1",
    TemplateData: JSON.stringify({
      name,
      code,
    }),
  });

  try {
    await ses.send(command);
    return NextResponse.json(
      { message: "テンプレートメール送信成功" },
      { status: 200 }
    );
  } catch (err) {
    console.error(err);
    return NextResponse.json(
      { message: "送信失敗", error: err },
      { status: 500 }
    );
  }
}

# IAM情報
AWS_ACCESS_KEY_ID=[IAMユーザのID]
AWS_SECRET_ACCESS_KEY=[IAMユーザのSECRET_KEY]
AWS_REGION=[メールテンプレートがあるリージョン]

# 送信元アドレス
SES_FROM_EMAIL=[送信元メールアドレス]