Resend + React Email: คู่มือ Transactional Email 2026

# Resend + React Email คืออะไร? คู่มือส่ง Transactional Email สำหรับ SaaS ไทย 2026

การส่งอีเมลแจ้งเตือน (Transactional Email) เช่น เมลยืนยันสมัครสมาชิก, เมลรีเซ็ตรหัสผ่าน, เมลใบเสร็จ, เมลแจ้งเตือนคำสั่งซื้อ คือ "หัวใจ" ของทุก SaaS และเว็บแอปพลิเคชันสมัยใหม่ แต่ผู้พัฒนาจำนวนมากยังใช้ SMTP ผ่าน Gmail หรือ Mailtrap บน development ซึ่งพอ production ก็เจอปัญหา: อีเมลเข้า Spam, Bounce rate สูง, Template แก้ไขยาก และไม่มี visibility ว่า email ถูกเปิดหรือคลิกหรือไม่

ในปี 2026 Resend กำลังกลายเป็นตัวเลือกอันดับหนึ่งของนักพัฒนา Next.js และ Laravel เพราะผูกกับ React Email เฟรมเวิร์กสำหรับสร้าง email template ด้วย React component ที่แสดงผลถูกต้องทั้ง Gmail, Outlook, Apple Mail และ dark mode บทความนี้จะสอนตั้งแต่การตั้งค่า Domain, SPF/DKIM/DMARC, ออกแบบ template, เชื่อม webhook จนถึง best practice ด้าน deliverability ที่ทำให้อีเมล "ไม่ตก Spam"

Resend คืออะไร ต่างจาก SendGrid/Mailgun อย่างไร

Resend คือ Email API สำหรับนักพัฒนาที่ออกแบบใหม่ตั้งแต่ศูนย์ เน้น Developer Experience (DX) เช่น API ที่ใช้ผ่าน SDK ได้ใน 3 บรรทัด, Dashboard ที่เห็น log รายอีเมล, รองรับ React Email เป็น native และค่าใช้จ่ายเริ่มฟรี 3,000 ฉบับ/เดือน เหมาะกับ startup ไทยที่เพิ่งเริ่ม

|--------|--------|----------|---------|---------|

| ราคา 50k/เดือน | ~$20 | ~$20 | ~$35 | ~$5 |

React Email คืออะไร ทำไมต้องใช้

React Email คือไลบรารีที่ทำให้เขียน email template เป็น React component ได้ แล้ว render ออกมาเป็น HTML ที่ compatible กับ email client ทุกค่าย รวมทั้ง Outlook รุ่นเก่าที่ใช้ Microsoft Word engine ทำให้เราไม่ต้องเขียน HTML table nested เอง

ข้อดีของการใช้ React Email:

เขียน component แบบเดียวกับ Next.js/React ที่คุ้นเคย — reuse design system ได้

Preview email ใน browser ขณะ develop ผ่าน CLI `email dev`

มี component สำเร็จ เช่น `<Button>`, `<Section>`, `<Heading>`, `<Link>` ที่ render เป็น table/tr/td อัตโนมัติ

ทดสอบ rendering กับ Gmail, Outlook, Apple Mail ได้จริงผ่าน tool ภายใน

รองรับ Tailwind CSS ด้วย plugin `@react-email/tailwind`

ขั้นตอนติดตั้ง Resend กับ Next.js 15

Step 1: สมัคร Resend และตั้งค่า Domain

เริ่มจากสมัครบัญชี Resend ที่ resend.com แล้วไปหน้า Domains กด "Add Domain" ใส่โดเมนที่ต้องการใช้ส่งอีเมล เช่น `mail.yourcompany.co.th` จากนั้น Resend จะให้ DNS records 3 ชุด: SPF, DKIM, DMARC ให้ไปเพิ่มใน DNS provider เช่น Cloudflare, AWS Route 53 หรือ ISP ที่จดโดเมน

**SPF**: `v=spf1 include:amazonses.com ~all`

**DKIM**: CNAME record สำหรับ domain key verification

**DMARC**: `v=DMARC1; p=quarantine; rua=mailto:postmaster@yourcompany.co.th`

หลังจาก propagate DNS ประมาณ 5-30 นาที Resend จะ verify อัตโนมัติ แล้วสถานะเปลี่ยนเป็น "Verified"

Step 2: ติดตั้ง Package และสร้าง API Key

```bash

npm install resend react-email @react-email/components

```

ไปที่ Resend Dashboard → API Keys → Create API Key เลือก permission "Sending access" เก็บ key ไว้ใน `.env.local`

```

RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxx

EMAIL_FROM=noreply@mail.yourcompany.co.th

```

Step 3: สร้าง Email Template ด้วย React Email

สร้างไฟล์ `emails/welcome.tsx`

```tsx

import { Button, Heading, Html, Section, Text } from '@react-email/components';

export default function WelcomeEmail({ name }: { name: string }) {

return (

<Html>

<Heading>ยินดีต้อนรับ {name}!</Heading>

<Text>ขอบคุณที่สมัครใช้งาน ADS FIT SaaS</Text>

เริ่มตั้งค่าบัญชี

</Button>

</Section>

</Html>

);

}

```

Step 4: ส่งอีเมลผ่าน API Route

สร้างไฟล์ `app/api/send/route.ts`

```ts

import { Resend } from 'resend';

import WelcomeEmail from '@/emails/welcome';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: Request) {

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

const { data, error } = await resend.emails.send({

from: process.env.EMAIL_FROM!,

to: email,

subject: 'ยินดีต้อนรับสู่ ADS FIT',

react: WelcomeEmail({ name }),

});

if (error) return Response.json({ error }, { status: 500 });

return Response.json({ id: data?.id });

}

```

ขั้นตอนใช้งานกับ Laravel 12

Laravel รองรับ Resend ผ่าน Symfony Mailer transport ตั้งแต่เวอร์ชัน 11 ขึ้นไป ติดตั้งได้เลย

```bash

composer require resend/resend-php symfony/http-client

```

แก้ไข `config/mail.php` เพิ่ม mailer

```php

'resend' => [

'transport' => 'resend',

```

ตั้งค่า `.env`

```

MAIL_MAILER=resend

RESEND_KEY=re_xxxxxxxxxxxxxxxxxxxx

MAIL_FROM_ADDRESS=noreply@mail.yourcompany.co.th

MAIL_FROM_NAME="${APP_NAME}"

```

ใช้ส่งอีเมลแบบเดิม

```php

use App\Mail\OrderConfirmation;

use Illuminate\Support\Facades\Mail;

Mail::to($user->email)->queue(new OrderConfirmation($order));

```

Webhook เพื่อติดตาม Event Email

Resend ส่ง webhook event ได้ 7 ประเภท: `sent`, `delivered`, `delivery_delayed`, `bounced`, `complained`, `opened`, `clicked` ทำให้เรารู้สถานะอีเมลแบบ real-time

ตัวอย่าง Webhook Handler Next.js

```ts

import crypto from 'crypto';

export async function POST(req: Request) {

const body = await req.text();

const signature = req.headers.get('svix-signature');

// ตรวจ signature ด้วย webhook secret จาก Resend dashboard

const event = JSON.parse(body);

switch (event.type) {

case 'email.bounced':

await markEmailBounced(event.data.to);

break;

case 'email.complained':

await suppressUser(event.data.to);

break;

}

return new Response('ok');

}

```

Deliverability Best Practice

การทำให้อีเมลไม่ตก Spam ขึ้นอยู่กับหลายปัจจัย ไม่ใช่แค่เลือก provider

**Warm-up domain**: ถ้าเพิ่งเริ่มใช้ domain ใหม่ ให้ส่งอีเมลวันละไม่เกิน 50 ฉบับ 7 วันแรก แล้วค่อยๆ เพิ่ม

**หลีกเลี่ยง spam trigger**: คำว่า "FREE!!!", "CLICK NOW", ตัวพิมพ์ใหญ่ทั้งประโยค, !!! เยอะเกิน

**Unsubscribe link**: ต้องมีทุกฉบับ (นอกจาก transactional บางประเภท) ตาม RFC 8058 list-unsubscribe

**Text version**: ใส่ plain text fallback คู่กับ HTML เสมอ

**Reputation monitoring**: ใช้ Google Postmaster Tools + Microsoft SNDS ตรวจคะแนนโดเมน

**Dedicated IP**: ถ้าส่ง > 100k/เดือน ควรเช่า IP แยก (Resend มี plan Pro $90/เดือน)

**Segment list**: แยก marketing email ออกจาก transactional email ใช้ subdomain ต่างกัน

เปรียบเทียบ Stack Integration

|-------|-----------|---------------------|---------|

สรุปและ CTA

Resend + React Email คือชุด tool ส่ง transactional email ยุคใหม่ที่ผูกกับ workflow นักพัฒนา Next.js และ Laravel ได้ลงตัว ตั้งแต่ DX ที่ดี, React component สำหรับ template ที่ maintain ได้ง่าย, webhook ครบถ้วน และราคาที่จับต้องได้สำหรับ SME ไทย

ประเด็นสำคัญที่ควรจำ:

ตั้ง SPF/DKIM/DMARC ให้ครบก่อนเริ่มส่งจริง

ใช้ React Email เขียน template แล้วใช้ซ้ำได้ในหลาย campaign

Subscribe webhook `bounced` และ `complained` เพื่อ auto-suppress user

แยก subdomain transactional กับ marketing เพื่อป้องกัน reputation ปน

Warm-up domain ใหม่ก่อนใช้จริง

สนใจสร้าง Email Service สำหรับ SaaS ของคุณ? ทีม ADS FIT ให้บริการออกแบบระบบส่งอีเมลแบบครบวงจร ตั้งแต่ DNS setup, React Email template ไปจนถึง queue worker ที่ scale ได้ [ติดต่อเรา](https://www.adsfit.co.th/contact) หรืออ่าน [บทความ Laravel 12](https://www.adsfit.co.th/blog/laravel-12-new-features-streamlined-structure-upgrade-guide-sme-thailand-2026) และ [Next.js 15](https://www.adsfit.co.th/blog/nextjs-15-web-development-guide-2026) เพิ่มเติม

สนใจโซลูชันนี้?

ปรึกษาทีม ADS FIT ฟรี เราพร้อมออกแบบระบบที่ฟิตกับธุรกิจของคุณ

ติดต่อเรา →

Resend + React Email คืออะไร? คู่มือส่ง Transactional Email สำหรับ SaaS ไทย 2026