ส่งอีเมลจากเว็บไซต์ตัวเองง่ายๆด้วย Resend

Resend คืออะไร?

Resend คือบริการ Email API ที่สร้างมาสำหรับนักพัฒนาโดยเฉพาะ ช่วยให้คุณส่งอีเมลจากเว็บหรือแอปได้ผ่าน API โดยไม่ต้องดูแล Mail Server เอง

ใช้ส่งอีเมลประเภทไหนได้บ้าง?

• Welcome Email หลังสมัครสมาชิก
• Email Verification / OTP
• Reset Password
• Invoice และ Notification
• Marketing Email

รองรับ: Node.js, Next.js, Python, PHP, Go และอีกหลาย Framework

สิ่งที่ต้องมี

• Node.js 18+ (nodejs.org)
• บัญชี Resend (ฟรี) (resend.com)
• VS Code หรือ Editor ที่ใช้งานอยู่

จุดเด่นของ Resend

• API ใช้งานง่าย เริ่มต้นได้ภายในไม่กี่นาที
• มี SDK รองรับหลายภาษา
• ใช้งานร่วมกับ React Email ได้โดยตรง
• มี Dashboard สำหรับตรวจสอบสถานะการส่งอีเมล
• รองรับ Webhook สำหรับติดตามการส่ง เปิดอ่าน และการคลิกลิงก์
• มีระบบช่วยเพิ่ม Deliverability ทำให้อีเมลมีโอกาสเข้ากล่อง Inbox มากขึ้น
• รองรับทั้ง Transactional Email และ Marketing Email
• มีที่อยู่อีเมลทดสอบสำเร็จรูป (เช่น delivered@resend.dev, bounced@resend.dev) สำหรับจำลองสถานการณ์ส่งอีเมลโดยไม่กระทบ reputation ของโดเมนจริง

ส่งอีเมลจาก Web ด้วย API ใน 10 นาที

ขั้นตอนที่ 1 — สมัครและสร้าง API Key

1. สมัครสมาชิก Resend
2. เข้าเมนู API Keys → คลิก Create API Key
3. ตั้งชื่อ เช่น my-app-key แล้วกด Create
4. คัดลอก Key ทันที — จะแสดงแค่ครั้งเดียว รูปแบบจะเป็น re_xxxxxxxxxxxxxxxxx

⚠️ อย่าใส่ API Key ไว้ใน Source Code โดยตรง ควรเก็บไว้ใน Environment Variables เพื่อความปลอดภัย

💡 สิ่งที่ควรรู้:

API Key มี 2 ระดับสิทธิ์:

• Full Access: จัดการข้อมูลได้ทั้งหมด (เหมาะสำหรับ Development)
• Sending Access: ส่งอีเมลได้อย่างเดียว (เหมาะสำหรับ Production)

หมายเหตุ: หากต้องใช้ฟังก์ชันตรวจสอบสถานะอีเมล (ขั้นตอนที่ 4) ต้องใช้ Key แบบ Full Access เท่านั้น

ขั้นตอนที่ 2 — สร้างโปรเจกต์และติดตั้ง Package

1. สร้างโปรเจกต์และติดตั้ง Package ใน command:

mkdir resend-demo
cd resend-demo
npm init -y
npm install resend dotenv

2. สร้างไฟล์ .env ที่ root ของโปรเจกต์:

RESEND_API_KEY=re_xxxxxxxxxxxxxxxxx

3. แก้ไขไฟล์ package.json (ไฟล์นี้ถูกสร้างไว้แล้วจากคำสั่ง npm init -y ในขั้นตอนที่ 1 ไม่ต้องสร้างใหม่) เพื่อเพิ่ม "type": "module" ให้ใช้ ES Module ได้:

{
  "name": "resend-demo",
  "version": "1.0.0",
  "type": "module",
  ...
}

ขั้นตอนที่ 3 — ส่งอีเมลแรก

สร้างไฟล์ send-email.js:

import { Resend } from "resend";
import * as dotenv from "dotenv";

dotenv.config();
const resend = new Resend(process.env.RESEND_API_KEY);
async function sendEmail() {
  const { data, error } = await resend.emails.send({
    from: "onboarding@resend.dev",       // ใช้ Domain นี้ได้เลยตอน Dev/Test
    to: "your@email.com",                // ต้องเป็นอีเมลเดียวกับที่ใช้สมัครบัญชี Resend
    subject: "ทดสอบการส่งอีเมลด้วย Resend",
    html: "<h1>Hello from Resend! 🎉</h1><p>ส่งอีเมลสำเร็จแล้ว</p>",
  });
  if (error) {
    console.error("เกิดข้อผิดพลาด:", error);
    return;
  }
  console.log("ส่งสำเร็จ! Email ID:", data.id);
}
sendEmail();

⚠️ onboarding@resend.dev ใช้สำหรับ Development/Testing เท่านั้น และก่อน Verify Domain จะส่งอีเมลได้เฉพาะอีเมลที่ใช้สมัครบัญชี Resend เท่านั้น สำหรับใช้งานจริง (Production) ต้อง Verify Domain ของตัวเองก่อน จึงจะส่งอีเมลถึงผู้รับทั่วไปได้

🔒 ควรเรียกใช้ Resend ผ่าน Backend หรือ API Route เท่านั้น ห้ามเรียกจาก Frontend (Browser) เพราะจะทำให้ API Key ถูกเปิดเผยและเสี่ยงต่อการถูกนำไปใช้งานโดยไม่ได้รับอนุญาต

รันไฟล์:

node send-email.js

ถ้าสำเร็จจะเห็น:

ส่งสำเร็จ! Email ID: 49a3999c-0ce1-4ea6-ab68-550f9db5a421

💡 เทคนิคทดสอบเพิ่มเติม: ถ้าอยากจำลองสถานการณ์ต่าง ๆ โดยไม่ต้องรอเช็คอีเมลจริง สามารถเปลี่ยน to เป็นที่อยู่ทดสอบของ Resend เช่น delivered@resend.dev (จำลองว่าส่งสำเร็จ) เพื่อดูผลใน Dashboard และทดสอบ Webhook ได้ทันที

ขั้นตอนที่ 4 — ตรวจสอบสถานะการส่ง

ดูได้ 2 วิธี :

1. ไปที่ Resend Dashboard → เมนู Emails จะเห็นสถานะ เช่น delivered, bounced, opened

กดดูรายละเอียด ตรงอีเมล

2. ดึงสถานะผ่าน API ด้วย Email ID ที่ได้มา (ต้องใช้ API Key แบบ Full Access):

const { data } = await resend.emails.get("49a3999c-0ce1-4ea6-ab68-550f9db5a421");
console.log(data.last_event); // "delivered"

Resend vs SMTP แบบเดิม