Email là một thành phần quan trọng của các ứng dụng web hiện đại, được sử dụng cho mọi thứ, từ việc chào mừng người dùng mới (user onboarding), thông báo, đến đặt lại mật khẩu và các chiến dịch marketing. Tuy nhiên, việc xây dựng và quản lý một cơ sở hạ tầng gửi email đáng tin cậy có thể phức tạp và tốn thời gian. Đây là lúc các dịch vụ API email như Resend phát huy tác dụng.
Resend cung cấp một nền tảng thân thiện với nhà phát triển, được thiết kế để đơn giản hóa quy trình gửi email giao dịch (transactional) và email marketing. Nền tảng này cung cấp các API mạnh mẽ, phân tích chi tiết và khả năng gửi email thành công vượt trội (excellent deliverability), cho phép các nhà phát triển tập trung vào việc xây dựng ứng dụng của họ thay vì lo lắng về cơ sở hạ tầng email.
Hướng dẫn toàn diện này sẽ đưa bạn đi qua mọi thứ bạn cần biết để bắt đầu với API Resend, từ việc hiểu các khái niệm cốt lõi và giá cả của nó cho đến việc tích hợp nó với nhiều framework và nền tảng phổ biến khác nhau.
Bạn muốn một nền tảng tích hợp, tất cả trong một (All-in-One) để nhóm phát triển của bạn làm việc cùng nhau với năng suất tối đa?
Apidog đáp ứng mọi yêu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!
Resend là gì?
Resend là một nền tảng API email được xây dựng dành cho các nhà phát triển. Nền tảng này hướng tới việc cung cấp trải nghiệm phát triển vượt trội so với các nhà cung cấp dịch vụ email (ESP) cũ hơn. Các tính năng chính bao gồm:
- API hiện đại: Một API RESTful gọn gàng, dễ dàng tích hợp vào bất kỳ ứng dụng nào.
- Khả năng gửi email cao: Tập trung vào việc đảm bảo email của bạn đến được hộp thư đến, không phải thư mục spam, thông qua các tính năng như xác minh tên miền tùy chỉnh (DKIM, SPF, DMARC), IP riêng (tùy chọn bổ sung) và quản lý danh sách chặn tự động.
- Tích hợp Framework: Cung cấp các SDK chính thức và hướng dẫn cho các framework phổ biến như Node.js, Next.js, Python, Ruby, PHP, Go, và nhiều framework khác.
- Tích hợp React Email: Tích hợp liền mạch với React Email, cho phép bạn xây dựng các mẫu email đẹp, phản hồi tốt (responsive) bằng cách sử dụng các thành phần React.
- Webhooks: Cung cấp thông báo theo thời gian thực về các sự kiện email như đã gửi thành công, bị trả lại (bounces), đã mở (opens), đã nhấp (clicks), và khiếu nại spam.
- Phân tích chi tiết: Cung cấp thông tin chi tiết về hiệu suất email thông qua một bảng điều khiển thân thiện với người dùng.
- Tập trung vào nhà phát triển: Được thiết kế dành cho các nhà phát triển, cung cấp tài liệu rõ ràng, các SDK hữu ích và các công cụ như email thử nghiệm để phát triển và gỡ lỗi dễ dàng hơn.
Resend định vị mình là một giải pháp hiện đại hơn, tập trung vào nhà phát triển, thay thế cho các đối thủ đã có tên tuổi như SendGrid, Mailgun, hoặc AWS SES, tập trung vào tính dễ sử dụng, độ tin cậy và khả năng tích hợp tốt với các quy trình phát triển web hiện đại.
Giá của Resend là bao nhiêu?
Resend cung cấp cấu trúc giá theo bậc dựa trên số lượng email gửi mỗi tháng, với các cân nhắc riêng cho email giao dịch (transactional) và email marketing (mặc dù trang giá chủ yếu chi tiết các gói giao dịch).
Dưới đây là phân tích các gói email giao dịch của họ (tính đến thời điểm viết bài):
Gói miễn phí (Free Plan):
- Chi phí: 0$ / tháng
- Số lượng email: Tối đa 3.000 email mỗi tháng
- Giới hạn hàng ngày: 100 email mỗi ngày
- Tên miền: 1 tên miền tùy chỉnh
- Thời gian lưu trữ dữ liệu: 1 ngày
- Hỗ trợ: Hỗ trợ qua Ticket
- Tính năng chính: RESTful API, SMTP Relay, SDK, Theo dõi mở/nhấp liên kết, Tích hợp React Email, Danh sách chặn tự động, Xác thực DKIM/SPF/DMARC, 1 Webhook Endpoint.
- Hạn chế: Không có Đăng nhập một lần (SSO), Không có IP riêng, Giới hạn tên miền và số lượng gửi hàng ngày.
Gói chuyên nghiệp (Pro Plan):
- Chi phí: 20$ / tháng
- Số lượng email: Tối đa 50.000 email mỗi tháng (có tính phí vượt quá giới hạn này)
- Giới hạn hàng ngày: Không giới hạn hàng ngày
- Tên miền: 10 tên miền tùy chỉnh
- Thời gian lưu trữ dữ liệu: 3 ngày
- Hỗ trợ: Hỗ trợ qua Ticket
- Tính năng chính: Tất cả tính năng của gói Miễn phí, cộng thêm SSO, 10 Webhook Endpoint.
- Hạn chế: Không bao gồm IP riêng (có sẵn dưới dạng bổ sung sau này), Không hỗ trợ qua Slack.
Gói mở rộng (Scale Plan):
- Chi phí: 90$ / tháng
- Số lượng email: Tối đa 100.000 email mỗi tháng (có tính phí vượt quá giới hạn)
- Giới hạn hàng ngày: Không giới hạn hàng ngày
- Tên miền: 1.000 tên miền tùy chỉnh
- Thời gian lưu trữ dữ liệu: 7 ngày
- Hỗ trợ: Hỗ trợ qua Slack & Ticket
- Tính năng chính: Tất cả tính năng của gói Pro, cộng thêm IP riêng có sẵn dưới dạng bổ sung (30$/tháng, yêu cầu >500 email/ngày).
- Hạn chế: IP riêng là một tùy chọn bổ sung.
Gói doanh nghiệp (Enterprise Plan):
- Chi phí: Giá tùy chỉnh
- Số lượng email: Khối lượng tùy chỉnh
- Giới hạn hàng ngày: Không giới hạn hàng ngày
- Tên miền: Linh hoạt
- Thời gian lưu trữ dữ liệu: Linh hoạt
- Hỗ trợ: Hỗ trợ ưu tiên, SLA phản hồi khẩn cấp, Chuyên môn về khả năng gửi email
- Tính năng chính: Tất cả tính năng của gói Scale, cộng thêm làm nóng IP riêng (Dedicated IP Warming), Thông tin chi tiết về khả năng gửi email, Webhooks linh hoạt, Bao gồm SSO.
Những cân nhắc chính:
- Vượt quá giới hạn (Overage): Gửi nhiều email hơn giới hạn gói của bạn sẽ phát sinh thêm chi phí cho mỗi email.
- IP riêng (Dedicated IPs): Có sẵn dưới dạng bổ sung cho gói Scale và Enterprise với phí hàng tháng bổ sung, được khuyến nghị cho những người gửi khối lượng lớn quan tâm đến uy tín IP dùng chung.
- Thời gian lưu trữ dữ liệu (Data Retention): Thời gian Resend lưu trữ nhật ký và chi tiết về các email đã gửi của bạn thay đổi tùy theo gói.
- Email Marketing: Trang giá có một tùy chọn chuyển đổi cho Email Marketing, cho thấy có thể áp dụng các gói hoặc cấu trúc giá khác nhau, nhưng chi tiết trong nội dung được cạo chỉ tập trung vào email giao dịch. Hãy kiểm tra trang web của Resend để có thông tin giá Email Marketing mới nhất.
Gói Miễn phí đủ hào phóng cho các dự án nhỏ hoặc mục đích thử nghiệm. Các gói Pro và Scale phục vụ các ứng dụng đang phát triển với khối lượng email và yêu cầu tính năng ngày càng tăng. Gói Enterprise cung cấp các giải pháp tùy chỉnh cho các hoạt động quy mô lớn.
Bắt đầu với Resend
Trước khi bạn có thể gửi email, bạn cần thiết lập tài khoản Resend và cấu hình tên miền gửi của mình.
1. Đăng ký và tạo khóa API
- Truy cập trang web của Resend và đăng ký tài khoản.
- Điều hướng đến phần API Keys trong bảng điều khiển Resend của bạn (https://resend.com/api-keys).
- Nhấp vào Create API Key.
- Đặt tên mô tả cho khóa API của bạn (ví dụ:
my-app-key). - Chọn cấp độ quyền:
- Full access: Cho phép tất cả hành động API (tạo, xóa, lấy, cập nhật tài nguyên). Sử dụng cẩn thận, thường chỉ cần cho các tác vụ quản lý backend.
- Sending access: Chỉ cho phép gửi email. Đây là quyền được khuyến nghị cho logic gửi email của ứng dụng của bạn. Bạn có thể tùy chọn giới hạn khóa này chỉ gửi từ một tên miền đã được xác minh cụ thể.
- Nhấp vào Create.
- Quan trọng: Resend sẽ chỉ hiển thị khóa API cho bạn một lần duy nhất. Hãy sao chép ngay lập tức và lưu trữ nó một cách an toàn (ví dụ: trong biến môi trường, trình quản lý bí mật). Không đưa trực tiếp vào mã nguồn của bạn.
2. Xác minh tên miền của bạn
Để gửi email trông chuyên nghiệp và tránh bộ lọc spam, bạn phải xác minh tên miền bạn sở hữu. Gửi từ các tên miền chưa được xác minh hoặc các địa chỉ mặc định như onboarding@resend.dev chỉ phù hợp cho việc thử nghiệm ban đầu.
- Truy cập phần Domains trong bảng điều khiển Resend của bạn (https://resend.com/domains).
- Nhấp vào Add Domain và nhập tên miền bạn muốn gửi email từ đó (ví dụ:
yourcompany.com). - Chọn nhà cung cấp DNS của bạn từ danh sách hoặc chọn 'Other'.
- Resend sẽ cung cấp cho bạn các bản ghi DNS (thường là MX, TXT cho SPF, và CNAME/TXT cho DKIM) mà bạn cần thêm vào cài đặt DNS của tên miền của mình.
- SPF (Sender Policy Framework): Chỉ định máy chủ mail nào được ủy quyền gửi email thay mặt cho tên miền của bạn.
- DKIM (DomainKeys Identified Mail): Thêm chữ ký số vào email, cho phép máy chủ nhận xác minh email chưa bị can thiệp và có nguồn gốc từ máy chủ được ủy quyền.
- Đăng nhập vào nhà đăng ký tên miền hoặc nhà cung cấp DNS của bạn (ví dụ: GoDaddy, Cloudflare, Namecheap) và thêm các bản ghi được cung cấp bởi Resend.
- Các thay đổi DNS có thể mất một chút thời gian để lan truyền (vài phút đến vài giờ, đôi khi lên đến 48 giờ).
- Sau khi các bản ghi đã được thêm, quay lại bảng điều khiển Domains của Resend và nhấp vào nút Verify bên cạnh tên miền của bạn. Resend sẽ kiểm tra xem các bản ghi DNS đã được thiết lập đúng chưa. Sau khi được xác minh, trạng thái sẽ cập nhật và bạn có thể bắt đầu gửi email từ các địa chỉ liên quan đến tên miền đó (ví dụ:
support@yourcompany.com,noreply@yourcompany.com).
3. Gửi email thử nghiệm
Trong quá trình phát triển, việc kiểm thử gửi email mà không ảnh hưởng đến uy tín tên miền của bạn hoặc vô tình gửi đến người dùng thật là rất quan trọng. Resend cung cấp các địa chỉ email đặc biệt để thử nghiệm các tình huống khác nhau:
- Kiểm tra đã gửi thành công (Test Delivered): Gửi đến
delivered@resend.dev. Điều này mô phỏng một email được gửi thành công. - Kiểm tra bị trả lại (Test Bounced): Gửi đến
bounced@resend.dev. Điều này mô phỏng một lỗi trả lại cứng (hard bounce) (ví dụ: địa chỉ người nhận không tồn tại), kích hoạt sự kiện trả lại. - Kiểm tra bị đánh dấu là Spam (Test Marked as Spam): Gửi đến
complained@resend.dev. Điều này mô phỏng người nhận đánh dấu email của bạn là spam, kích hoạt sự kiện khiếu nại.
Sử dụng các địa chỉ thử nghiệm này cho phép bạn xác minh tích hợp của mình và kiểm thử các trình xử lý webhook cho các sự kiện trả lại và khiếu nại một cách an toàn.
Tích hợp Resend với các Framework
Resend cung cấp các SDK chính thức và các phương pháp tích hợp đơn giản cho nhiều ngôn ngữ và framework khác nhau. Chúng tôi sẽ đề cập đến một số ví dụ phổ biến dựa trên tài liệu được cung cấp. Khái niệm cốt lõi thường bao gồm:
- Cài đặt SDK Resend (nếu có) hoặc sử dụng các yêu cầu HTTP tiêu chuẩn.
- Khởi tạo client Resend bằng khóa API của bạn (được tải một cách an toàn, thường từ các biến môi trường).
- Gọi phương thức
emails.send(hoặc tương đương) với các tham số nhưfrom,to,subject, vàhtmlhoặcreact.
Gửi email với Next.js
Next.js là một framework React phổ biến. Resend tích hợp tốt, đặc biệt là với React Email.
1. Cài đặt:
npm install resend
# or
yarn add resend
# or
pnpm add resend
2. Tạo mẫu email (Tùy chọn nhưng được khuyến nghị):Sử dụng React Email hoặc tạo một thành phần React đơn giản cho nội dung email của bạn.
// components/email-template.tsx
import * as React from 'react';
interface EmailTemplateProps {
firstName: string;
}
export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
firstName,
}) => (
<div>
<h1>Welcome, {firstName}!</h1>
</div>
);
3. Tạo API Route:Tạo một trình xử lý API route để gửi email.
- App Router:
app/api/send/route.ts - Pages Router:
pages/api/send.ts
// app/api/send/route.ts (Ví dụ App Router)
import { EmailTemplate } from '../../../components/email-template'; // Điều chỉnh đường dẫn nếu cần
import { Resend } from 'resend';
// Đảm bảo RESEND_API_KEY được thiết lập trong .env.local của bạn
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST() {
try {
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>', // Sử dụng tên miền đã xác minh của bạn
to: ['delivered@resend.dev'], // Thay thế bằng người nhận hoặc địa chỉ thử nghiệm
subject: 'Hello from Resend and Next.js!',
react: EmailTemplate({ firstName: 'Test' }), // Truyền props vào mẫu của bạn
// Hoặc sử dụng `html`:
// html: '<strong>It works!</strong>'
});
if (error) {
return Response.json({ error }, { status: 400 });
}
return Response.json(data);
} catch (error) {
return Response.json({ error }, { status: 500 });
}
}
// pages/api/send.ts (Ví dụ Pages Router - điều chỉnh import/response)
// import type { NextApiRequest, NextApiResponse } from 'next';
// import { EmailTemplate } from '../../components/EmailTemplate';
// import { Resend } from 'resend';
//
// const resend = new Resend(process.env.RESEND_API_KEY);
//
// export default async (req: NextApiRequest, res: NextApiResponse) => {
// try { // Thêm try...catch để xử lý lỗi tốt hơn
// const { data, error } = await resend.emails.send({
// from: 'Your Name <you@yourverifieddomain.com>',
// to: ['delivered@resend.dev'],
// subject: 'Hello world',
// react: EmailTemplate({ firstName: 'John' }),
// });
//
// if (error) {
// return res.status(400).json(error);
// }
//
// res.status(200).json(data);
// } catch (e) {
// res.status(500).json({ error: 'Internal Server Error' });
// }
// };
4. Kích hoạt:Gọi điểm cuối API này từ frontend của bạn (ví dụ: sau khi gửi form) bằng cách sử dụng fetch hoặc một thư viện như axios. Nhớ thay thế các giá trị giữ chỗ bằng tên miền đã xác minh thực tế và danh sách người nhận của bạn.
Gửi email với Astro
Astro là một trình xây dựng trang tĩnh hiện đại cũng hỗ trợ Server-Side Rendering (SSR).
1. Cài đặt Resend:
npm install resend
# or
yarn add resend
# or
pnpm add resend
2. Cài đặt SSR Adapter:Astro cần một SSR adapter để chạy mã phía máy chủ theo yêu cầu. Cài đặt một adapter phù hợp với mục tiêu triển khai của bạn (ví dụ: @astrojs/node, @astrojs/vercel, @astrojs/cloudflare).
npx astro add node # Ví dụ cho Node.js adapter
Làm theo hướng dẫn thiết lập của adapter trong astro.config.mjs của bạn.
3. Thêm khóa API:Lưu trữ RESEND_API_KEY của bạn trong tệp .env.
4. Tạo Astro Action:Sử dụng Astro Actions (tính năng thử nghiệm tại thời điểm viết bài, kiểm tra tài liệu Astro để biết trạng thái hiện tại) hoặc các điểm cuối API tiêu chuẩn.
// src/actions/index.ts (Sử dụng Astro Actions)
import { ActionError, defineAction, z } from 'astro:actions';
import { Resend } from 'resend';
// Đảm bảo RESEND_API_KEY có sẵn thông qua import.meta.env
const resend = new Resend(import.meta.env.RESEND_API_KEY);
export const server = {
send: defineAction({
// Ví dụ: Định nghĩa kiểm tra đầu vào nếu cần
// input: z.object({ email: z.string().email() }),
handler: async (/* { email } - nếu sử dụng input */) => {
try { // Thêm try...catch
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'], // Thay thế bằng người nhận
subject: 'Hello from Resend and Astro!',
html: '<strong>Astro works!</strong>',
// Bạn cũng có thể sử dụng các mẫu React nếu bạn đã thiết lập React trong Astro
// react: <YourAstroCompatibleReactEmail firstName="Astro" />
});
if (error) {
console.error("Resend Error:", error); // Ghi nhật ký lỗi
// Ném ActionError giúp Astro xử lý lỗi một cách duyên dáng
throw new ActionError({
code: 'BAD_REQUEST', // Hoặc cụ thể hơn dựa trên lỗi
message: error.message || 'Failed to send email',
});
}
return data; // Trả về dữ liệu thành công
} catch (e) {
console.error("Handler Error:", e);
// Ném lại hoặc ném một ActionError mới
throw new ActionError({
code: 'INTERNAL_SERVER_ERROR',
message: 'An unexpected error occurred.',
});
}
},
}),
};
// Thay thế: API Endpoint (ví dụ: src/pages/api/send.ts)
// import type { APIRoute } from 'astro';
// import { Resend } from 'resend';
//
// const resend = new Resend(import.meta.env.RESEND_API_KEY);
//
// export const POST: APIRoute = async ({ request }) => {
// // const body = await request.json(); // Nếu dữ liệu đến từ request body
// try {
// const { data, error } = await resend.emails.send({ /* ... các tham số email ... */ });
// if (error) {
// return new Response(JSON.stringify(error), { status: 400 });
// }
// return new Response(JSON.stringify(data), { status: 200 });
// } catch (e) {
// return new Response(JSON.stringify({ message: "Server Error"}), { status: 500 });
// }
// }
5. Kích hoạt:Gọi action hoặc endpoint từ các thành phần hoặc trang Astro của bạn, thường là trong trình xử lý gửi form.
Gửi email với Bun
Bun là một runtime JavaScript nhanh với trình đóng gói (bundler), trình chuyển đổi (transpiler), trình chạy tác vụ (task runner) và client npm tích hợp sẵn.
1. Cài đặt:
bun install resend
2. Tạo mẫu email (Tùy chọn):Tương tự như Next.js, bạn có thể tạo một tệp .tsx cho mẫu email React của mình.
// email-template.tsx
import * as React from 'react';
interface EmailTemplateProps {
firstName: string;
}
export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
firstName,
}) => (
<div>
<h1>Welcome, {firstName}!</h1>
</div>
);
3. Tạo Bun Server Script:Tạo một script (ví dụ: index.tsx) để chạy một máy chủ HTTP đơn giản bằng Bun.
// index.tsx
import { Resend } from 'resend';
import { EmailTemplate } from './email-template'; // Giả sử nó ở cùng thư mục
// Tải khóa API từ biến môi trường
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
console.error("Error: RESEND_API_KEY environment variable not set.");
process.exit(1); // Thoát nếu thiếu khóa
}
const resend = new Resend(resendApiKey);
const server = Bun.serve({
port: 3000,
async fetch(req) { // Thêm đối số 'req'
// Tùy chọn: Kiểm tra phương thức request, đường dẫn, v.v.
// if (new URL(req.url).pathname !== '/send') {
// return new Response("Not Found", { status: 404 });
// }
// if (req.method !== 'POST') {
// return new Response("Method Not Allowed", { status: 405 });
// }
try {
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'],
subject: 'Hello from Resend and Bun!',
react: EmailTemplate({ firstName: 'Bun User' }),
// Hoặc sử dụng html: '<strong>Bun works!</strong>'
});
if (error) {
console.error("Resend Error:", error);
// Trả về phản hồi lỗi JSON phù hợp
return new Response(JSON.stringify({ error: error.message || 'Failed to send email' }), {
status: 500, // Hoặc 400 tùy loại lỗi
headers: { 'Content-Type': 'application/json' },
});
}
// Trả về phản hồi thành công
return new Response(JSON.stringify(data), {
status: 200,
headers: { 'Content-Type': 'application/json' },
});
} catch (e) {
console.error("Server Error:", e);
return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
status: 500,
headers: { 'Content-Type': 'application/json' },
});
}
},
error(error) { // Thêm trình xử lý lỗi cơ bản cho chính máy chủ
return new Response(`<pre>${error}\\\\\\\\n${error.stack}</pre>`, {
headers: { "Content-Type": "text/html" },
});
},
});
console.log(`Listening on <http://localhost>:${server.port} ...`);
4. Chạy:Khởi động máy chủ bằng lệnh RESEND_API_KEY=your_api_key bun run index.tsx. Truy cập http://localhost:3000 (hoặc kích hoạt route/phương thức cụ thể bạn đã định nghĩa) sẽ gửi email.
Gửi email với Nuxt
Nuxt là một framework Vue.js phổ biến.
1. Cài đặt:
npm install resend
# or
yarn add resend
# or
pnpm add resend
2. Tạo Server Route:Nuxt sử dụng thư mục server/ cho logic backend. Tạo một tệp như server/api/send.post.ts (đuôi .post chỉ ra rằng nó xử lý các yêu cầu POST).
// server/api/send.post.ts
import { Resend } from 'resend';
// Truy cập khóa API một cách an toàn (ví dụ: thông qua runtimeConfig trong nuxt.config.ts)
// Xem: <https://nuxt.com/docs/guide/going-further/runtime-config>
const config = useRuntimeConfig();
const resend = new Resend(config.resendApiKey); // Giả sử khóa được đặt trong runtime config
export default defineEventHandler(async (event) => {
// Tùy chọn: Đọc body nếu dữ liệu đến từ request
// const body = await readBody(event);
try {
const data = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'],
subject: 'Hello from Resend and Nuxt!',
html: '<strong>Nuxt works!</strong>',
// Bạn có thể tích hợp các mẫu email Vue (ví dụ: sử dụng vue-email)
// Xem: <https://github.com/Dave136/vue-email>
});
// Nuxt 3 tự động xử lý việc trả về dữ liệu dưới dạng JSON
return data;
} catch (error: any) { // Bắt các loại lỗi cụ thể nếu có thể
console.error("Resend Error:", error);
// Ném một lỗi mà Nuxt có thể xử lý, thiết lập mã trạng thái
throw createError({
statusCode: 400, // Hoặc 500
statusMessage: 'Failed to send email',
data: error // Tùy chọn bao gồm chi tiết lỗi
});
}
});
// Trong nuxt.config.ts của bạn, định nghĩa runtimeConfig:
// export default defineNuxtConfig({
// runtimeConfig: {
// resendApiKey: process.env.NUXT_RESEND_API_KEY, // Chỉ phía máy chủ
// public: {
// // Khóa công khai có thể truy cập ở phía client
// }
// }
// })
// Và thiết lập NUXT_RESEND_API_KEY trong .env của bạn
3. Kích hoạt:Gọi điểm cuối /api/send (sử dụng phương thức POST) từ các trang hoặc thành phần Nuxt của bạn bằng cách sử dụng $fetch hoặc useFetch.
Gửi email với Vercel Functions
Vercel Functions là các hàm serverless tích hợp liền mạch với Next.js hoặc có thể được sử dụng độc lập. Ví dụ Next.js ở trên đã minh họa cách sử dụng trong môi trường Vercel. Nếu sử dụng Vercel Functions mà không có Next.js (ví dụ: với trình tạo trang tĩnh hoặc framework khác được triển khai trên Vercel), cách tiếp cận tương tự:
1. Tạo Function:Tạo một tệp trong thư mục api/ của dự án của bạn (ví dụ: api/send.ts).
// api/send.ts (Ví dụ cho Vercel Function tiêu chuẩn)
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { Resend } from 'resend'; // Bạn có thể cần cài đặt resend
// Đảm bảo RESEND_API_KEY được thiết lập dưới dạng Biến môi trường Vercel
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
console.error("RESEND_API_KEY is not set");
// Không tiếp tục nếu thiếu khóa trong môi trường production
}
const resend = new Resend(resendApiKey);
export default async function handler(
request: VercelRequest,
response: VercelResponse,
) {
// Được khuyến nghị: Kiểm tra phương thức POST
if (request.method !== 'POST') {
return response.status(405).json({ message: 'Method Not Allowed' });
}
try {
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'],
subject: 'Hello from Resend & Vercel Functions!',
html: '<strong>It works on Vercel!</strong>',
// Các mẫu React có thể được sử dụng nếu function của bạn đóng gói React
});
if (error) {
console.error('Resend Error:', error);
return response.status(400).json(error);
}
return response.status(200).json(data);
} catch (e) {
console.error('Handler Error:', e);
return response.status(500).json({ message: 'Internal Server Error' });
}
}
2. Cấu hình Biến môi trường:Thêm RESEND_API_KEY của bạn dưới dạng Biến môi trường trong cài đặt dự án Vercel của bạn.
3. Triển khai:Triển khai dự án của bạn bằng cách sử dụng Vercel CLI (vercel) hoặc tích hợp Git.
4. Kích hoạt:Thực hiện yêu cầu POST đến URL của function đã triển khai (ví dụ: https://your-project.vercel.app/api/send).
Gửi email với Supabase Edge Functions
Supabase Edge Functions chạy trên Deno Deploy, gần với người dùng của bạn. Chúng sử dụng Deno và các Web API tiêu chuẩn như fetch. Resend chưa có SDK Deno chính thức, vì vậy bạn sử dụng fetch trực tiếp.
1. Tạo Supabase Function:Sử dụng Supabase CLI:
supabase functions new resend-email-sender # Chọn một tên
cd supabase/functions/resend-email-sender
2. Chỉnh sửa Handler:Sửa đổi tệp index.ts được tạo.
// supabase/functions/resend-email-sender/index.ts
import { serve } from "<https://deno.land/std@0.177.0/http/server.ts>"; // Sử dụng phiên bản std phù hợp
// Truy cập khóa API một cách an toàn thông qua các biến môi trường của Supabase Edge Function
const RESEND_API_KEY = Deno.env.get('RESEND_API_KEY');
// Trình xử lý request cơ bản
const handler = async (_request: Request): Promise<Response> => {
if (!RESEND_API_KEY) {
console.error("RESEND_API_KEY environment variable not set.");
return new Response(JSON.stringify({ error: "Server configuration error" }), {
status: 500, headers: { 'Content-Type': 'application/json' }
});
}
// Tùy chọn: Kiểm tra phương thức _request, headers, hoặc body nếu cần
try {
const res = await fetch('<https://api.resend.com/emails>', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${RESEND_API_KEY}` // Sử dụng khóa ở đây
},
body: JSON.stringify({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'], // Thay thế người nhận
subject: 'Hello from Resend & Supabase Edge!',
html: '<strong>It works! Edge Functions are cool.</strong>',
// Lưu ý: Gửi các thành phần React trực tiếp không khả thi ở đây
// nếu không có bước build trong edge function để render chúng thành HTML.
// Gửi HTML đã được render trước hoặc văn bản thuần túy.
})
});
// Xử lý các phản hồi không OK tiềm ẩn từ Resend API
if (!res.ok) {
const errorData = await res.json().catch(() => ({ message: 'Failed to parse Resend error response' }));
console.error("Resend API Error:", res.status, errorData);
return new Response(JSON.stringify({ error: 'Failed to send email via Resend', details: errorData }), {
status: res.status, // Chuyển tiếp mã trạng thái của Resend
headers: { 'Content-Type': 'application/json' },
});
}
// Phân tích phản hồi thành công
const data = await res.json();
// Trả về phản hồi thành công
return new Response(JSON.stringify(data), {
status: 200,
headers: { 'Content-Type': 'application/json' },
});
} catch (error) {
console.error("Edge Function Error:", error);
return new Response(JSON.stringify({ error: 'Internal Server Error in Edge Function' }), {
status: 500,
headers: { 'Content-Type': 'application/json' },
});
}
};
// Khởi động máy chủ
serve(handler);
console.log("Supabase Edge Function 'resend-email-sender' is running...");
3. Thiết lập Biến môi trường:Thiết lập RESEND_API_KEY cục bộ bằng lệnh supabase secrets set RESEND_API_KEY your_actual_key và cũng thiết lập nó trong cài đặt Function của dự án Supabase của bạn để triển khai.
4. Triển khai & Kích hoạt:
# Kiểm thử cục bộ (tùy chọn)
supabase functions serve resend-email-sender --no-verify-jwt
# Triển khai
supabase functions deploy resend-email-sender --no-verify-jwt
Kích hoạt function bằng URL của nó, thường là thông qua một lệnh gọi thư viện client Supabase từ frontend hoặc dịch vụ backend khác của bạn.
Gửi email với Cloudflare Workers
Cloudflare Workers là các hàm serverless chạy trên mạng biên (edge network) của Cloudflare. SDK Node.js của Resend thường có thể hoạt động trong môi trường Workers với việc đóng gói phù hợp.
1. Thiết lập Worker Project:Khởi tạo một dự án Worker, thường sử dụng npm create cloudflare. Đảm bảo nó được thiết lập cho các module và đóng gói (ví dụ: sử dụng Wrangler với Webpack hoặc esbuild).
2. Cài đặt Resend:
npm install resend
# or yarn/pnpm
3. Tạo mẫu email (Tùy chọn):Nếu sử dụng React, tạo tệp mẫu của bạn (.tsx).
4. Chỉnh sửa Worker Script:Sửa đổi tệp worker chính của bạn (ví dụ: src/index.ts hoặc src/index.tsx nếu sử dụng React).
// src/index.tsx (Ví dụ sử dụng React)
import { Resend } from 'resend';
// Giả sử bạn có một thành phần mẫu React
import { EmailTemplate } from './emails/email-template'; // Điều chỉnh đường dẫn
// Định nghĩa các biến môi trường dự kiến cho an toàn kiểu dữ liệu
export interface Env {
RESEND_API_KEY: string;
}
export default {
async fetch(
request: Request,
env: Env, // Truy cập biến môi trường thông qua 'env'
ctx: ExecutionContext
): Promise<Response> {
// Khởi tạo Resend bằng khóa API từ biến môi trường
const resend = new Resend(env.RESEND_API_KEY);
// Tùy chọn: Kiểm tra phương thức request, đường dẫn URL, v.v.
// Ví dụ: Chỉ cho phép các yêu cầu POST đến một đường dẫn cụ thể
// const url = new URL(request.url);
// if (url.pathname !== '/send-email' || request.method !== 'POST') {
// return new Response('Not Found or Method Not Allowed', { status: 404 });
// }
try {
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'], // Thay thế người nhận
subject: 'Hello from Resend & Cloudflare Workers!',
// Sử dụng thành phần React nếu áp dụng
react: <EmailTemplate firstName="Worker User" />,
// Hoặc sử dụng HTML
// html: '<strong>It works from the Edge!</strong>',
});
if (error) {
console.error("Resend Error:", JSON.stringify(error));
return Response.json({ error: 'Failed to send email via Resend' }, { status: 400 });
}
return Response.json(data);
} catch (e) {
console.error("Worker Error:", e);
// Ghi nhật ký stack lỗi nếu có thể
if (e instanceof Error) {
console.error(e.stack);
}
return Response.json({ error: 'Internal Server Error in Worker' }, { status: 500 });
}
},
} // satisfies ExportedHandler<Env>; // Tùy chọn: Sử dụng satisfies để kiểm tra kiểu dữ liệu tốt hơn
5. Cấu hình Biến môi trường:Thiết lập RESEND_API_KEY dưới dạng bí mật cho Worker của bạn bằng Wrangler:
npx wrangler secret put RESEND_API_KEY
# Dán khóa của bạn khi được yêu cầu
6. Triển khai:
npx wrangler deploy # Hoặc 'wrangler dev' để kiểm thử cục bộ
Kích hoạt Worker bằng URL được gán cho nó.
Gửi email với AWS Lambda
Việc cạo dữ liệu cho trang tài liệu AWS Lambda đã hết thời gian, vì vậy phần này dựa trên các nguyên tắc chung.
Gửi email từ AWS Lambda bằng Resend tuân theo một mô hình tương tự:
1. Thiết lập Lambda Function:Tạo một Lambda function bằng runtime ưa thích của bạn (Node.js phổ biến và hoạt động tốt với SDK Resend). Đảm bảo Lambda của bạn có quyền truy cập internet (ví dụ: được cấu hình trong VPC với NAT Gateway hoặc sử dụng cài đặt VPC mặc định cho phép egress).
2. Cài đặt Resend SDK:Bao gồm resend trong gói triển khai của function của bạn (ví dụ: trong package.json và chạy npm install trước khi nén hoặc sử dụng Lambda Layers).
3. Lưu trữ khóa API một cách an toàn:Sử dụng AWS Secrets Manager hoặc AWS Systems Manager Parameter Store để lưu trữ RESEND_API_KEY của bạn. Cấp cho vai trò thực thi (execution role) của Lambda function quyền đọc bí mật này. Không mã hóa cứng (hardcode) khóa trong mã của Lambda function.
4. Viết mã Lambda Handler (Ví dụ Node.js):
// lambda_function.js (Ví dụ Node.js)
const { Resend } = require('resend');
// Các client AWS SDK (nếu lấy khóa từ Secrets Manager/Parameter Store)
const { SecretsManagerClient, GetSecretValueCommand } = require("@aws-sdk/client-secrets-manager"); // SDK V3
let resend; // Khởi tạo bên ngoài handler để có thể tái sử dụng
async function getApiKey() {
// Thay thế bằng tên/ARN bí mật và khu vực của bạn
const secretName = "your/resend/api/key/secret";
const client = new SecretsManagerClient({ region: "your-region" });
try {
const command = new GetSecretValueCommand({ SecretId: secretName });
const response = await client.send(command);
if ('SecretString' in response) {
// Giả sử bí mật lưu trữ khóa trực tiếp hoặc dưới dạng JSON như {"apiKey": "re_..."}
const secret = JSON.parse(response.SecretString);
return secret.apiKey; // Điều chỉnh phân tích cú pháp dựa trên cách bạn lưu trữ nó
}
throw new Error("API Key not found in secret string");
} catch (error) {
console.error("Error retrieving API Key from Secrets Manager:", error);
throw error; // Ném lại để báo hiệu lỗi
}
}
exports.handler = async (event, context) => {
// Tùy chọn: Phân tích dữ liệu sự kiện nếu cần (ví dụ: từ trigger API Gateway)
// const body = JSON.parse(event.body || '{}');
// const recipient = body.to;
try {
if (!resend) {
const apiKey = await getApiKey();
if (!apiKey) {
return { statusCode: 500, body: JSON.stringify({ message: "API Key configuration error" }) };
}
resend = new Resend(apiKey);
}
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'], // Sử dụng người nhận từ sự kiện hoặc giá trị cố định
subject: 'Hello from Resend & AWS Lambda!',
html: '<strong>Lambda email sent successfully!</strong>',
// React yêu cầu bước build hoặc thiết lập server-side rendering trong Lambda
});
if (error) {
console.error('Resend Error:', error);
return {
statusCode: 400, // Hoặc trạng thái phù hợp dựa trên lỗi
body: JSON.stringify(error),
};
}
return {
statusCode: 200,
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' },
};
} catch (e) {
console.error('Lambda Handler Error:', e);
return {
statusCode: 500,
body: JSON.stringify({ message: 'Internal Server Error' }),
};
}
};
5. Cấu hình Trigger:Thiết lập trigger cho Lambda function của bạn (ví dụ: API Gateway cho các yêu cầu HTTP, hàng đợi SQS, sự kiện EventBridge).
6. Triển khai:Triển khai Lambda function và các phụ thuộc của nó.
Sử dụng React Email với Resend
Một lợi thế lớn của Resend là khả năng tích hợp liền mạch với React Email. React Email cho phép bạn xây dựng các mẫu email đẹp, phản hồi tốt bằng cách sử dụng các thành phần và cú pháp React tiêu chuẩn.
Lợi ích:
- Dựa trên thành phần (Component-Based): Cấu trúc email giống như các ứng dụng web bằng cách sử dụng các thành phần có thể tái sử dụng.
- An toàn kiểu dữ liệu (Type Safety): Sử dụng TypeScript để tạo các mẫu mạnh mẽ hơn.
- Phát triển cục bộ (Local Development): Phát triển và xem trước email cục bộ trong trình duyệt của bạn.
- Không cần ngôn ngữ tạo mẫu phức tạp: Tránh các cú pháp tạo mẫu email độc quyền hoặc phức tạp.
Thiết lập (Dựa trên Tài liệu React Email - có thể thay đổi một chút):
Cài đặt: Thêm react-email và các thành phần cốt lõi của nó vào dự án của bạn. Bạn có thể sẽ cần cả resend nếu gửi qua họ.
npm install react-email @react-email/components resend
# or yarn/pnpm
Tạo mẫu email: Tạo các tệp .tsx cho email của bạn, thường trong một thư mục chuyên dụng emails/.
// emails/welcome.tsx
import { Html, Button, Text } from '@react-email/components';
import * as React from 'react';
interface WelcomeEmailProps {
name: string;
signupLink: string;
}
export const WelcomeEmail: React.FC<Readonly<WelcomeEmailProps>> = ({ name, signupLink }) => (
<Html>
<Text>Hello {name},</Text>
<Text>Welcome aboard! Click the button below to get started.</Text>
<Button href={signupLink}>Complete Signup</Button>
</Html>
);
export default WelcomeEmail; // Export mặc định thường hữu ích
Tích hợp với logic gửi email: Trong API route backend hoặc serverless function của bạn, import thành phần email và truyền nó vào tùy chọn react của Resend.
// Ví dụ trong Next.js API Route (app/api/send-welcome/route.ts)
import { Resend } from 'resend';
import WelcomeEmail from '../../../emails/welcome'; // Điều chỉnh đường dẫn
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST(request: Request) {
try {
const body = await request.json(); // Giả sử { email: '...', name: '...' } trong body
const signupUrl = "<https://yoursite.com/signup-step2>"; // URL ví dụ
const { data, error } = await resend.emails.send({
from: 'Your App <welcome@yourverifieddomain.com>',
to: [body.email],
subject: 'Welcome to Our Platform!',
// Truyền trực tiếp thành phần React
react: WelcomeEmail({ name: body.name, signupLink: signupUrl }),
});
if (error) {
return Response.json({ error }, { status: 400 });
}
return Response.json(data);
} catch (error) {
return Response.json({ error }, { status: 500 });
}
}
Resend (và quy trình build của React Email nếu sử dụng độc lập) xử lý việc render thành phần React thành HTML an toàn cho email ở phía sau. Điều này cải thiện đáng kể trải nghiệm của nhà phát triển trong việc tạo và duy trì các mẫu email.
Kết luận
Resend cung cấp một giải pháp hiện đại, tập trung vào nhà phát triển để gửi email. API gọn gàng, khả năng tích hợp framework xuất sắc (đặc biệt với React Email), tập trung vào khả năng gửi email thành công và các tính năng hữu ích như email thử nghiệm và webhooks làm cho nó trở thành một lựa chọn hấp dẫn cho các ứng dụng ở mọi quy mô.
Bằng cách làm theo các bước được nêu trong hướng dẫn này—thiết lập tài khoản, xác minh tên miền, chọn phương pháp tích hợp phù hợp cho framework của bạn và tận dụng các công cụ như React Email—bạn có thể nhanh chóng và đáng tin cậy tích hợp chức năng email mạnh mẽ vào các dự án của mình. Hãy nhớ luôn xử lý khóa API một cách an toàn và theo dõi hoạt động gửi email của bạn thông qua bảng điều khiển Resend và webhooks để đảm bảo khả năng gửi email tối ưu và trải nghiệm người dùng tốt nhất.
Bạn muốn một nền tảng tích hợp, tất cả trong một (All-in-One) để nhóm phát triển của bạn làm việc cùng nhau với năng suất tối đa?
Apidog đáp ứng mọi yêu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!