Apidog

Platform Pengembangan API Kolaboratif All-in-one

Desain API

Dokumentasi API

Debug API

Mocking API

Pengujian Otomatis API

Daftar gratis
UnduhUntuk Mac atau Linux
Home

/

Cara Menggunakan Resend API: Panduan Pemula

Cara Menggunakan Resend API: Panduan Pemula

Mark Ponomarev

Mark Ponomarev

Updated on May 1, 2025

Email adalah komponen penting dari aplikasi web modern, digunakan untuk segala hal mulai dari orientasi pengguna dan notifikasi hingga pengaturan ulang kata sandi dan kampanye pemasaran. Namun, membangun dan mengelola infrastruktur pengiriman email yang andal bisa menjadi kompleks dan memakan waktu. Di sinilah layanan API email seperti Resend berperan.

Resend menawarkan platform yang ramah bagi pengembang yang dirancang untuk menyederhanakan proses pengiriman email transaksional dan pemasaran. Layanan ini menyediakan API yang kuat, analitik terperinci, dan kemampuan pengiriman yang sangat baik, memungkinkan pengembang untuk fokus membangun aplikasi mereka daripada khawatir tentang infrastruktur email.

Panduan komprehensif ini akan memandu Anda melalui semua yang perlu Anda ketahui untuk memulai dengan Resend API, mulai dari memahami konsep inti dan harganya hingga mengintegrasikannya dengan berbagai framework dan platform populer.

💡
Ingin alat Pengujian API hebat yang menghasilkan Dokumentasi API yang indah?

Ingin platform Terintegrasi, All-in-One untuk Tim Pengembang Anda agar dapat bekerja sama dengan produktivitas maksimum?

Apidog memenuhi semua kebutuhan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!
button

Apa itu Resend?

Resend adalah platform API email yang dibangun untuk pengembang. Tujuannya adalah untuk memberikan pengalaman pengembang yang superior dibandingkan penyedia layanan email (ESP) yang lebih lama. Fitur utama meliputi:

  • API Modern: API RESTful yang bersih, mudah diintegrasikan ke dalam aplikasi apa pun.
  • Kemampuan Pengiriman Tinggi: Berfokus pada memastikan email Anda mencapai kotak masuk, bukan folder spam, melalui fitur-fitur seperti verifikasi domain kustom (DKIM, SPF, DMARC), IP khusus (sebagai add-on), dan manajemen daftar penekanan otomatis.
  • Integrasi Framework: Menawarkan SDK resmi dan panduan untuk framework populer seperti Node.js, Next.js, Python, Ruby, PHP, Go, dan lainnya.
  • Integrasi React Email: Terintegrasi dengan mulus dengan React Email, memungkinkan Anda membangun template email yang indah dan responsif menggunakan komponen React.
  • Webhooks: Menyediakan notifikasi real-time tentang peristiwa email seperti pengiriman, bounce, pembukaan, klik, dan keluhan spam.
  • Analitik Terperinci: Menawarkan wawasan tentang kinerja email melalui dashboard yang mudah digunakan.
  • Fokus Pengembang: Dirancang dengan mempertimbangkan pengembang, menawarkan dokumentasi yang jelas, SDK yang membantu, dan alat seperti email uji untuk pengembangan dan debugging yang lebih mudah.

Resend memposisikan dirinya sebagai alternatif yang lebih modern dan berpusat pada pengembang dibandingkan pemain mapan seperti SendGrid, Mailgun, atau AWS SES, dengan fokus pada kemudahan penggunaan, keandalan, dan integrasi yang baik dengan alur kerja pengembangan web modern.

Berapa Harga Resend?

Resend menawarkan struktur harga berjenjang berdasarkan jumlah email yang dikirim per bulan, dengan pertimbangan terpisah untuk email transaksional dan pemasaran (meskipun halaman harga terutama merinci paket transaksional).

Berikut adalah rincian paket email transaksional mereka (pada saat penulisan):

Paket Gratis:

  • Biaya: $0 / bulan
  • Email: Hingga 3.000 email per bulan
  • Batas Harian: 100 email per hari
  • Domain: 1 domain kustom
  • Retensi Data: 1 hari
  • Dukungan: Dukungan Tiket
  • Fitur Utama: RESTful API, SMTP Relay, SDK, Pelacakan Buka/Tautan, Integrasi React Email, Daftar Penekanan Otomatis, Otentikasi DKIM/SPF/DMARC, 1 Titik Akhir Webhook.
  • Keterbatasan: Tidak ada Single Sign-On (SSO), Tidak ada IP Khusus, Domain dan pengiriman harian terbatas.

Paket Pro:

  • Biaya: $20 / bulan
  • Email: Hingga 50.000 email per bulan (dengan biaya kelebihan berlaku di luar ini)
  • Batas Harian: Tidak ada batas harian
  • Domain: 10 domain kustom
  • Retensi Data: 3 hari
  • Dukungan: Dukungan Tiket
  • Fitur Utama: Semua fitur paket Gratis, ditambah SSO, 10 Titik Akhir Webhook.
  • Keterbatasan: Tidak ada IP Khusus yang disertakan (tersedia sebagai add-on nanti), Tidak ada dukungan Slack.

Paket Skala:

  • Biaya: $90 / bulan
  • Email: Hingga 100.000 email per bulan (dengan biaya kelebihan)
  • Batas Harian: Tidak ada batas harian
  • Domain: 1.000 domain kustom
  • Retensi Data: 7 hari
  • Dukungan: Dukungan Slack & Tiket
  • Fitur Utama: Semua fitur paket Pro, ditambah IP Khusus tersedia sebagai add-on ($30/bulan, memerlukan >500 email/hari).
  • Keterbatasan: IP Khusus adalah add-on.

Paket Enterprise:

  • Biaya: Harga kustom
  • Email: Volume kustom
  • Batas Harian: Tidak ada batas harian
  • Domain: Fleksibel
  • Retensi Data: Fleksibel
  • Dukungan: Dukungan Prioritas, SLA Respons Mendesak, Keahlian Pengiriman
  • Fitur Utama: Semua fitur paket Skala, ditambah IP Khusus Pemanasan, Wawasan Pengiriman, Webhook Fleksibel, SSO disertakan.

Pertimbangan Utama:

  • Kelebihan: Mengirim lebih banyak email dari yang diizinkan oleh paket Anda akan menimbulkan biaya tambahan per email.
  • IP Khusus: Tersedia sebagai add-on untuk paket Skala dan Enterprise dengan biaya bulanan tambahan, direkomendasikan untuk pengirim bervolume tinggi yang khawatir tentang reputasi IP bersama.
  • Retensi Data: Durasi Resend menyimpan log dan detail tentang email yang Anda kirim bervariasi berdasarkan paket.
  • Email Pemasaran: Halaman harga memiliki tombol untuk Email Pemasaran, menunjukkan bahwa paket atau struktur harga yang berbeda mungkin berlaku, tetapi rinciannya difokuskan pada email transaksional dalam konten yang diambil. Periksa situs web Resend untuk harga Email Pemasaran yang paling mutakhir.

Paket Gratis cukup murah hati untuk proyek kecil atau tujuan pengujian. Paket Pro dan Skala melayani aplikasi yang sedang berkembang dengan volume email dan persyaratan fitur yang meningkat. Paket Enterprise menyediakan solusi yang disesuaikan untuk operasi skala besar.

Memulai dengan Resend

Sebelum Anda dapat mengirim email, Anda perlu menyiapkan akun Resend Anda dan mengkonfigurasi domain pengirim Anda.

1. Mendaftar dan Membuat Kunci API

  • Buka situs web Resend dan daftar untuk mendapatkan akun.
  • Navigasi ke bagian API Keys di dashboard Resend Anda (https://resend.com/api-keys).
  • Klik Create API Key.
  • Beri nama deskriptif untuk kunci API Anda (misalnya, my-app-key).
  • Pilih tingkat izin:
  • Akses penuh: Mengizinkan semua tindakan API (membuat, menghapus, mendapatkan, memperbarui sumber daya). Gunakan dengan hati-hati, biasanya hanya diperlukan untuk tugas manajemen backend.
  • Akses pengiriman: Hanya mengizinkan pengiriman email. Ini adalah izin yang direkomendasikan untuk logika pengiriman aplikasi Anda. Anda dapat secara opsional membatasi kunci ini untuk hanya mengirim dari domain terverifikasi tertentu.
  • Klik Create.
  • Penting: Resend hanya akan menampilkan kunci API sekali. Salin segera dan simpan dengan aman (misalnya, dalam variabel lingkungan, pengelola rahasia). Jangan komit langsung ke dalam basis kode Anda.

2. Verifikasi Domain Anda

Untuk mengirim email yang terlihat profesional dan menghindari filter spam, Anda harus memverifikasi domain yang Anda miliki. Mengirim dari domain yang tidak terverifikasi atau alamat default seperti onboarding@resend.dev hanya cocok untuk pengujian awal.

  • Buka bagian Domains di dashboard Resend Anda (https://resend.com/domains).
  • Klik Add Domain dan masukkan domain yang ingin Anda gunakan untuk mengirim email (misalnya, yourcompany.com).
  • Pilih penyedia DNS Anda dari daftar atau pilih 'Other'.
  • Resend akan memberi Anda catatan DNS (biasanya MX, TXT untuk SPF, dan CNAME/TXT untuk DKIM) yang perlu Anda tambahkan ke pengaturan DNS domain Anda.
  • SPF (Sender Policy Framework): Menentukan server email mana yang diizinkan untuk mengirim email atas nama domain Anda.
  • DKIM (DomainKeys Identified Mail): Menambahkan tanda tangan digital ke email, memungkinkan server penerima memverifikasi bahwa email belum diubah dan berasal dari server yang diotorisasi.
  • Masuk ke registrar domain atau penyedia DNS Anda (misalnya, GoDaddy, Cloudflare, Namecheap) dan tambahkan catatan yang disediakan oleh Resend.
  • Perubahan DNS dapat memakan waktu untuk menyebar (menit hingga jam, kadang-kadang hingga 48 jam).
  • Setelah catatan ditambahkan, kembali ke dashboard Resend Domains dan klik tombol Verify di samping domain Anda. Resend akan memeriksa apakah catatan DNS telah diatur dengan benar. Setelah diverifikasi, status akan diperbarui, dan Anda dapat mulai mengirim email dari alamat yang terkait dengan domain tersebut (misalnya, support@yourcompany.com, noreply@yourcompany.com).

3. Mengirim Email Uji

Selama pengembangan, sangat penting untuk menguji pengiriman email tanpa memengaruhi reputasi domain Anda atau secara tidak sengaja mengirim ke pengguna nyata. Resend menyediakan alamat email khusus untuk menguji berbagai skenario:

  • Uji Terkirim: Kirim ke delivered@resend.dev. Ini mensimulasikan email yang berhasil terkirim.
  • Uji Bounce: Kirim ke bounced@resend.dev. Ini mensimulasikan hard bounce (misalnya, alamat penerima tidak ada), memicu peristiwa bounce.
  • Uji Ditandai sebagai Spam: Kirim ke complained@resend.dev. Ini mensimulasikan penerima menandai email Anda sebagai spam, memicu peristiwa keluhan.

Menggunakan alamat uji ini memungkinkan Anda memverifikasi integrasi Anda dan menguji handler webhook untuk peristiwa bounce dan keluhan dengan aman.

Mengintegrasikan Resend dengan Framework

Resend menyediakan SDK resmi dan metode integrasi yang mudah untuk berbagai bahasa dan framework. Kami akan membahas beberapa contoh populer berdasarkan dokumentasi yang disediakan. Konsep intinya biasanya melibatkan:

  1. Menginstal SDK Resend (jika tersedia) atau menggunakan permintaan HTTP standar.
  2. Menginisialisasi klien Resend dengan kunci API Anda (dimuat dengan aman, biasanya dari variabel lingkungan).
  3. Memanggil metode emails.send (atau yang setara) dengan parameter seperti from, to, subject, dan html atau react.

Mengirim dengan Next.js

Next.js adalah framework React yang populer. Resend terintegrasi dengan baik, terutama dengan React Email.

1. Instal:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. Buat Template Email (Opsional tapi direkomendasikan):Gunakan React Email atau buat komponen React sederhana untuk badan email Anda.

// 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. Buat Rute API:Buat handler rute API untuk mengirim email.

  • App Router: app/api/send/route.ts
  • Pages Router: pages/api/send.ts
// app/api/send/route.ts (Contoh App Router)
import { EmailTemplate } from '../../../components/email-template'; // Sesuaikan path jika perlu
import { Resend } from 'resend';

// Pastikan RESEND_API_KEY diatur di .env.local Anda
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>', // Gunakan domain terverifikasi Anda
      to: ['delivered@resend.dev'], // Ganti dengan penerima atau alamat uji
      subject: 'Hello from Resend and Next.js!',
      react: EmailTemplate({ firstName: 'Test' }), // Lewatkan props ke template Anda
      // Alternatif, gunakan `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 (Contoh Pages Router - sesuaikan impor/respons)
// 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 { // Menambahkan try...catch untuk penanganan kesalahan yang lebih baik
//     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. Pemicu:Panggil titik akhir API ini dari frontend Anda (misalnya, setelah pengiriman formulir) menggunakan fetch atau library seperti axios. Ingatlah untuk mengganti nilai placeholder dengan domain terverifikasi dan daftar penerima Anda yang sebenarnya.

Mengirim dengan Astro

Astro adalah pembangun situs statis modern yang juga mendukung rendering sisi server (SSR).

1. Instal Resend:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. Instal Adapter SSR:Astro membutuhkan adapter SSR untuk menjalankan kode sisi server sesuai permintaan. Instal salah satu yang cocok untuk target deployment Anda (misalnya, @astrojs/node, @astrojs/vercel, @astrojs/cloudflare).

npx astro add node # Contoh untuk adapter Node.js

Ikuti instruksi pengaturan adapter di astro.config.mjs Anda.

3. Tambahkan Kunci API:Simpan RESEND_API_KEY Anda di file .env Anda.

4. Buat Astro Action:Gunakan Astro Actions (fitur eksperimental saat penulisan, periksa dokumen Astro untuk status saat ini) atau titik akhir API standar.

// src/actions/index.ts (Menggunakan Astro Actions)
import { ActionError, defineAction, z } from 'astro:actions';
import { Resend } from 'resend';

// Pastikan RESEND_API_KEY tersedia melalui import.meta.env
const resend = new Resend(import.meta.env.RESEND_API_KEY);

export const server = {
  send: defineAction({
    // Contoh: Definisikan validasi input jika diperlukan
    // input: z.object({ email: z.string().email() }),
    handler: async (/* { email } - jika menggunakan input */) => {
      try { // Menambahkan try...catch
        const { data, error } = await resend.emails.send({
          from: 'Your Name <you@yourverifieddomain.com>',
          to: ['delivered@resend.dev'], // Ganti dengan penerima
          subject: 'Hello from Resend and Astro!',
          html: '<strong>Astro works!</strong>',
          // Anda juga dapat menggunakan template React jika Anda mengatur React di Astro
          // react: <YourAstroCompatibleReactEmail firstName="Astro" />
        });

        if (error) {
          console.error("Resend Error:", error); // Log error
          // Melempar ActionError membantu Astro menangani kesalahan dengan anggun
          throw new ActionError({
            code: 'BAD_REQUEST', // Atau lebih spesifik berdasarkan error
            message: error.message || 'Failed to send email',
          });
        }

        return data; // Mengembalikan data sukses
      } catch (e) {
         console.error("Handler Error:", e);
         // Melempar kembali atau melempar ActionError baru
         throw new ActionError({
             code: 'INTERNAL_SERVER_ERROR',
             message: 'An unexpected error occurred.',
         });
      }
    },
  }),
};

// Alternatif: Titik Akhir API (misalnya, 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(); // Jika data berasal dari badan permintaan
//   try {
//     const { data, error } = await resend.emails.send({ /* ... parameter 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. Pemicu:Panggil action atau endpoint dari komponen atau halaman Astro Anda, biasanya dalam handler pengiriman formulir.

Mengirim dengan Bun

Bun adalah runtime JavaScript cepat dengan bundler, transpiler, task runner, dan klien npm bawaan.

1. Instal:

bun install resend

2. Buat Template Email (Opsional):Sama seperti Next.js, Anda dapat membuat file .tsx untuk template email React Anda.

// 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. Buat Skrip Server Bun:Buat skrip (misalnya, index.tsx) untuk menjalankan server HTTP sederhana menggunakan Bun.

// index.tsx
import { Resend } from 'resend';
import { EmailTemplate } from './email-template'; // Asumsi berada di direktori yang sama

// Muat kunci API dari variabel lingkungan
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
  console.error("Error: Variabel lingkungan RESEND_API_KEY tidak diatur.");
  process.exit(1); // Keluar jika kunci hilang
}
const resend = new Resend(resendApiKey);

const server = Bun.serve({
  port: 3000,
  async fetch(req) { // Menambahkan argumen 'req'
    // Opsional: Periksa metode permintaan, path, dll.
    // 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' }),
        // Atau gunakan html: '<strong>Bun works!</strong>'
      });

      if (error) {
        console.error("Resend Error:", error);
        // Mengembalikan respons error JSON yang tepat
        return new Response(JSON.stringify({ error: error.message || 'Failed to send email' }), {
          status: 500, // Atau 400 tergantung jenis error
          headers: { 'Content-Type': 'application/json' },
        });
      }

      // Mengembalikan respons sukses
      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) { // Menambahkan handler error dasar untuk server itu sendiri
      return new Response(`<pre>${error}\\\\\\\\n${error.stack}</pre>`, {
          headers: { "Content-Type": "text/html" },
      });
  },
});

console.log(`Listening on <http://localhost>:${server.port} ...`);

4. Jalankan:Mulai server menggunakan RESEND_API_KEY=your_api_key bun run index.tsx. Mengakses http://localhost:3000 (atau memicu rute/metode spesifik yang Anda definisikan) akan mengirim email.

Mengirim dengan Nuxt

Nuxt adalah framework Vue.js yang populer.

1. Instal:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. Buat Rute Server:Nuxt menggunakan direktori server/ untuk logika backend. Buat file seperti server/api/send.post.ts (.post menunjukkan bahwa itu menangani permintaan POST).

// server/api/send.post.ts
import { Resend } from 'resend';

// Akses Kunci API dengan aman (misalnya, melalui runtimeConfig di nuxt.config.ts)
// Lihat: <https://nuxt.com/docs/guide/going-further/runtime-config>
const config = useRuntimeConfig();
const resend = new Resend(config.resendApiKey); // Asumsi kunci diatur dalam runtime config

export default defineEventHandler(async (event) => {
  // Opsional: Baca body jika data berasal dari permintaan
  // 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>',
      // Anda dapat mengintegrasikan template email Vue (misalnya, menggunakan vue-email)
      // Lihat: <https://github.com/Dave136/vue-email>
    });

    // Nuxt 3 secara otomatis menangani pengembalian data sebagai JSON
    return data;

  } catch (error: any) { // Tangkap jenis error spesifik jika memungkinkan
    console.error("Resend Error:", error);
    // Lempar error yang dapat ditangani Nuxt, mengatur kode status
    throw createError({
        statusCode: 400, // Atau 500
        statusMessage: 'Failed to send email',
        data: error // Secara opsional sertakan detail error
    });
  }
});

// Di nuxt.config.ts Anda, definisikan runtimeConfig:
// export default defineNuxtConfig({
//   runtimeConfig: {
//     resendApiKey: process.env.NUXT_RESEND_API_KEY, // Hanya sisi server
//     public: {
//       // Kunci publik yang dapat diakses di sisi klien
//     }
//   }
// })
// Dan atur NUXT_RESEND_API_KEY di .env Anda

3. Pemicu:Panggil titik akhir /api/send (menggunakan metode POST) dari halaman atau komponen Nuxt Anda menggunakan $fetch atau useFetch.

Mengirim dengan Vercel Functions

Vercel Functions adalah fungsi serverless yang terintegrasi dengan mulus dengan Next.js atau dapat digunakan secara mandiri. Contoh Next.js di atas sudah mendemonstrasikan penggunaan dalam lingkungan Vercel. Jika menggunakan Vercel Functions tanpa Next.js (misalnya, dengan generator situs statis atau framework lain yang di-deploy di Vercel), pendekatannya serupa:

1. Buat Fungsi:Buat file di direktori api/ proyek Anda (misalnya, api/send.ts).

// api/send.ts (Contoh untuk Vercel Function standar)
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { Resend } from 'resend'; // Anda mungkin perlu menginstal resend

// Pastikan RESEND_API_KEY diatur sebagai Variabel Lingkungan Vercel
const resendApiKey = process.env.RESEND_API_KEY;

if (!resendApiKey) {
  console.error("RESEND_API_KEY tidak diatur");
  // Jangan lanjutkan jika kunci hilang dalam produksi
}

const resend = new Resend(resendApiKey);

export default async function handler(
  request: VercelRequest,
  response: VercelResponse,
) {
  // Direkomendasikan: Periksa metode 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>',
      // Template React dapat digunakan jika fungsi Anda mem-bundle 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. Konfigurasi Variabel Lingkungan:Tambahkan RESEND_API_KEY Anda sebagai Variabel Lingkungan di pengaturan proyek Vercel Anda.

3. Deploy:Deploy proyek Anda menggunakan Vercel CLI (vercel) atau integrasi Git.

4. Pemicu:Buat permintaan POST ke URL fungsi yang di-deploy (misalnya, https://your-project.vercel.app/api/send).

Mengirim dengan Supabase Edge Functions

Supabase Edge Functions berjalan di Deno Deploy, dekat dengan pengguna Anda. Mereka menggunakan Deno dan Web API standar seperti fetch. Resend belum memiliki SDK Deno resmi, jadi Anda menggunakan fetch secara langsung.

1. Buat Fungsi Supabase:Gunakan Supabase CLI:

supabase functions new resend-email-sender # Pilih nama
cd supabase/functions/resend-email-sender

2. Edit Handler:Modifikasi file index.ts yang dihasilkan.

// supabase/functions/resend-email-sender/index.ts
import { serve } from "<https://deno.land/std@0.177.0/http/server.ts>"; // Gunakan versi std yang sesuai

// Akses Kunci API dengan aman melalui variabel lingkungan Supabase Edge Function
const RESEND_API_KEY = Deno.env.get('RESEND_API_KEY');

// Handler permintaan dasar
const handler = async (_request: Request): Promise<Response> => {
  if (!RESEND_API_KEY) {
      console.error("Variabel lingkungan RESEND_API_KEY tidak diatur.");
      return new Response(JSON.stringify({ error: "Kesalahan konfigurasi server" }), {
          status: 500, headers: { 'Content-Type': 'application/json' }
      });
  }

  // Opsional: Periksa metode _request, header, atau body jika diperlukan

  try {
    const res = await fetch('<https://api.resend.com/emails>', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${RESEND_API_KEY}` // Gunakan kunci di sini
        },
        body: JSON.stringify({
            from: 'Your Name <you@yourverifieddomain.com>',
            to: ['delivered@resend.dev'], // Ganti penerima
            subject: 'Hello from Resend & Supabase Edge!',
            html: '<strong>It works! Edge Functions are cool.</strong>',
            // Catatan: Mengirim komponen React secara langsung tidak memungkinkan di sini
            // tanpa langkah build di edge function untuk merendernya ke HTML.
            // Kirim HTML yang sudah dirender sebelumnya atau teks biasa.
        })
    });

    // Tangani respons non-OK potensial dari Resend API
    if (!res.ok) {
        const errorData = await res.json().catch(() => ({ message: 'Gagal mengurai respons error Resend' }));
        console.error("Resend API Error:", res.status, errorData);
        return new Response(JSON.stringify({ error: 'Gagal mengirim email melalui Resend', details: errorData }), {
            status: res.status, // Teruskan kode status Resend
            headers: { 'Content-Type': 'application/json' },
        });
    }

    // Urai respons yang berhasil
    const data = await res.json();

    // Mengembalikan respons sukses
    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: 'Kesalahan Server Internal di Edge Function' }), {
          status: 500,
          headers: { 'Content-Type': 'application/json' },
      });
  }
};

// Mulai server
serve(handler);
console.log("Supabase Edge Function 'resend-email-sender' sedang berjalan...");

3. Atur Variabel Lingkungan:Atur RESEND_API_KEY secara lokal menggunakan supabase secrets set RESEND_API_KEY your_actual_key dan juga atur di pengaturan Fungsi proyek Supabase Anda untuk deployment.

4. Deploy & Panggil:

# Uji secara lokal (opsional)
supabase functions serve resend-email-sender --no-verify-jwt

# Deploy
supabase functions deploy resend-email-sender --no-verify-jwt

Panggil fungsi menggunakan URL-nya, biasanya melalui panggilan library klien Supabase dari frontend Anda atau layanan backend lainnya.

Mengirim dengan Cloudflare Workers

Cloudflare Workers adalah fungsi serverless yang berjalan di jaringan edge Cloudflare. SDK Node.js Resend seringkali dapat bekerja di lingkungan Workers dengan bundling yang sesuai.

1. Siapkan Proyek Worker:Inisialisasi proyek Worker, seringkali menggunakan npm create cloudflare. Pastikan proyek diatur untuk modul dan bundling (misalnya, menggunakan Wrangler dengan Webpack atau esbuild).

2. Instal Resend:

npm install resend
# or yarn/pnpm

3. Buat Template Email (Opsional):Jika menggunakan React, buat file template Anda (.tsx).

4. Edit Skrip Worker:Modifikasi file worker utama Anda (misalnya, src/index.ts atau src/index.tsx jika menggunakan React).

// src/index.tsx (Contoh menggunakan React)
import { Resend } from 'resend';
// Asumsi Anda memiliki komponen template React
import { EmailTemplate } from './emails/email-template'; // Sesuaikan path

// Definisikan variabel lingkungan yang diharapkan untuk keamanan tipe
export interface Env {
  RESEND_API_KEY: string;
}

export default {
  async fetch(
    request: Request,
    env: Env, // Akses variabel lingkungan melalui 'env'
    ctx: ExecutionContext
  ): Promise<Response> {

    // Instansiasi Resend menggunakan kunci API dari variabel lingkungan
    const resend = new Resend(env.RESEND_API_KEY);

    // Opsional: Periksa metode permintaan, path URL, dll.
    // Contoh: Hanya izinkan permintaan POST ke path spesifik
    // 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'], // Ganti penerima
        subject: 'Hello from Resend & Cloudflare Workers!',
        // Gunakan komponen React jika berlaku
        react: <EmailTemplate firstName="Worker User" />,
        // Atau gunakan HTML
        // html: '<strong>It works from the Edge!</strong>',
      });

      if (error) {
        console.error("Resend Error:", JSON.stringify(error));
        return Response.json({ error: 'Gagal mengirim email melalui Resend' }, { status: 400 });
      }

      return Response.json(data);

    } catch (e) {
      console.error("Worker Error:", e);
      // Log stack error jika memungkinkan
      if (e instanceof Error) {
         console.error(e.stack);
      }
      return Response.json({ error: 'Kesalahan Server Internal di Worker' }, { status: 500 });
    }
  },
} // satisfies ExportedHandler<Env>; // Opsional: Gunakan satisfies untuk pemeriksaan tipe yang lebih baik

5. Konfigurasi Variabel Lingkungan:Atur RESEND_API_KEY Anda sebagai rahasia untuk Worker Anda menggunakan Wrangler:

npx wrangler secret put RESEND_API_KEY
# Tempel kunci Anda saat diminta

6. Deploy:

npx wrangler deploy # Atau 'wrangler dev' untuk pengujian lokal

Panggil Worker menggunakan URL yang ditetapkan.

Mengirim dengan AWS Lambda

Pengambilan data untuk halaman dokumentasi AWS Lambda habis waktu, jadi bagian ini didasarkan pada prinsip umum.

Mengirim email dari AWS Lambda menggunakan Resend mengikuti pola yang serupa:

1. Siapkan Fungsi Lambda:Buat fungsi Lambda menggunakan runtime pilihan Anda (Node.js umum dan berfungsi baik dengan Resend SDK). Pastikan Lambda Anda memiliki akses internet (misalnya, dikonfigurasi dalam VPC dengan NAT Gateway atau menggunakan pengaturan VPC default yang memungkinkan egress).

2. Instal Resend SDK:Sertakan resend dalam paket deployment fungsi Anda (misalnya, di package.json dan jalankan npm install sebelum mengompres atau menggunakan Lambda Layers).

3. Simpan Kunci API dengan Aman:Gunakan AWS Secrets Manager atau AWS Systems Manager Parameter Store untuk menyimpan RESEND_API_KEY Anda. Berikan peran eksekusi fungsi Lambda Anda izin untuk membaca rahasia ini. Jangan memasukkan kunci secara hardcode dalam kode fungsi Lambda.

4. Tulis Kode Handler Lambda (Contoh Node.js):

// lambda_function.js (Contoh Node.js)
const { Resend } = require('resend');
// Klien AWS SDK (jika mendapatkan kunci dari Secrets Manager/Parameter Store)
const { SecretsManagerClient, GetSecretValueCommand } = require("@aws-sdk/client-secrets-manager"); // V3 SDK

let resend; // Inisialisasi di luar handler untuk penggunaan kembali potensial

async function getApiKey() {
    // Ganti dengan nama/ARN rahasia dan wilayah Anda
    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) {
            // Asumsi rahasia menyimpan kunci secara langsung atau sebagai JSON seperti {"apiKey": "re_..."}
            const secret = JSON.parse(response.SecretString);
            return secret.apiKey; // Sesuaikan parsing berdasarkan cara Anda menyimpannya
        }
        throw new Error("Kunci API tidak ditemukan dalam string rahasia");
    } catch (error) {
        console.error("Error mengambil Kunci API dari Secrets Manager:", error);
        throw error; // Melempar kembali untuk menandakan kegagalan
    }
}

exports.handler = async (event, context) => {
    // Opsional: Urai data event jika diperlukan (misalnya, dari pemicu 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: "Kesalahan konfigurasi Kunci API" }) };
            }
            resend = new Resend(apiKey);
        }

        const { data, error } = await resend.emails.send({
            from: 'Your Name <you@yourverifieddomain.com>',
            to: ['delivered@resend.dev'], // Gunakan penerima dari event atau nilai tetap
            subject: 'Hello from Resend & AWS Lambda!',
            html: '<strong>Email Lambda berhasil dikirim!</strong>',
            // React memerlukan langkah build atau pengaturan rendering sisi server dalam Lambda
        });

        if (error) {
            console.error('Resend Error:', error);
            return {
                statusCode: 400, // Atau status yang sesuai berdasarkan error
                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: 'Kesalahan Server Internal' }),
        };
    }
};

5. Konfigurasi Pemicu:Atur pemicu untuk fungsi Lambda Anda (misalnya, API Gateway untuk permintaan HTTP, antrian SQS, peristiwa EventBridge).

6. Deploy:Deploy fungsi Lambda Anda dan dependensinya.

Menggunakan React Email dengan Resend

Keunggulan utama Resend adalah integrasinya yang mulus dengan React Email. React Email memungkinkan Anda membangun template email yang indah dan responsif menggunakan komponen dan sintaks React standar.

Manfaat:

  • Berbasis Komponen: Struktur email seperti aplikasi web menggunakan komponen yang dapat digunakan kembali.
  • Keamanan Tipe: Gunakan TypeScript untuk template yang lebih kuat.
  • Pengembangan Lokal: Kembangkan dan pratinjau email secara lokal di browser Anda.
  • Tidak Ada Bahasa Templating yang Kompleks: Hindari sintaks templating email yang berpemilik atau kompleks.

Pengaturan (Berdasarkan Dokumen React Email - mungkin sedikit bervariasi):

Instal: Tambahkan react-email dan komponen intinya ke proyek Anda. Anda kemungkinan juga memerlukan resend jika mengirim melalui mereka.

npm install react-email @react-email/components resend
# or yarn/pnpm

Buat Template Email: Buat file .tsx untuk email Anda, biasanya di direktori emails/ khusus.

// 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; // Default export seringkali membantu

Integrasi dengan Logika Pengiriman: Di rute API backend atau fungsi serverless Anda, impor komponen email dan teruskan ke opsi react Resend.

// Contoh di Rute API Next.js (app/api/send-welcome/route.ts)
import { Resend } from 'resend';
import WelcomeEmail from '../../../emails/welcome'; // Sesuaikan path

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

export async function POST(request: Request) {
  try {
    const body = await request.json(); // Asumsi { email: '...', name: '...' } di body
    const signupUrl = "<https://yoursite.com/signup-step2>"; // Contoh URL

    const { data, error } = await resend.emails.send({
      from: 'Your App <welcome@yourverifieddomain.com>',
      to: [body.email],
      subject: 'Welcome to Our Platform!',
      // Teruskan komponen React secara langsung
      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 (dan proses build React Email jika digunakan secara mandiri) menangani rendering komponen React ke HTML yang aman untuk email di balik layar. Ini secara signifikan meningkatkan pengalaman pengembang untuk membuat dan memelihara template email.

Kesimpulan

Resend menawarkan solusi modern yang berfokus pada pengembang untuk mengirim email. API-nya yang bersih, integrasi framework yang sangat baik (terutama dengan React Email), fokus pada kemampuan pengiriman, dan fitur-fitur yang membantu seperti email uji dan webhooks menjadikannya pilihan yang menarik untuk aplikasi dari semua ukuran.

Dengan mengikuti langkah-langkah yang diuraikan dalam panduan ini—menyiapkan akun Anda, memverifikasi domain Anda, memilih metode integrasi yang tepat untuk framework Anda, dan memanfaatkan alat seperti React Email—Anda dapat dengan cepat dan andal mengintegrasikan fungsionalitas email yang kuat ke dalam proyek Anda. Ingatlah untuk selalu menangani kunci API dengan aman dan memantau aktivitas pengiriman Anda melalui dashboard Resend dan webhooks untuk memastikan kemampuan pengiriman dan pengalaman pengguna yang optimal.

💡
Ingin alat Pengujian API hebat yang menghasilkan Dokumentasi API yang indah?

Ingin platform Terintegrasi, All-in-One untuk Tim Pengembang Anda agar dapat bekerja sama dengan produktivitas maksimum?

Apidog memenuhi semua kebutuhan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!
button