Blog
Bakış Açısı

Resend API'sini Nasıl Kullanılır (Yeni Başlayanlar İçin Kılavuz)

Modern web uygulamaları için e-posta kritik. Kullanıcı kaydı, bildirimler, şifre sıfırlama ve pazarlama için kullanılır. Resend gibi e-posta API'leri, güvenilir e-posta göndermeyi kolaylaştırır.

Efe Demir

Efe Demir

5 June 2025

Resend API'sini Nasıl Kullanılır (Yeni Başlayanlar İçin Kılavuz)

E-posta, kullanıcı kaydı ve bildirimlerden parola sıfırlamalarına ve pazarlama kampanyalarına kadar her şey için kullanılan modern web uygulamalarının kritik bir bileşenidir. Ancak, güvenilir bir e-posta gönderme altyapısı oluşturmak ve yönetmek karmaşık ve zaman alıcı olabilir. İşte Resend gibi e-posta API hizmetlerinin devreye girdiği yer burasıdır.

Resend, işlem ve pazarlama e-postaları gönderme sürecini basitleştirmek için tasarlanmış, geliştirici dostu bir platform sunar. Geliştiricilerin e-posta altyapısı hakkında endişelenmek yerine uygulamalarını oluşturmaya odaklanmalarını sağlayan sağlam API'ler, ayrıntılı analizler ve mükemmel teslim edilebilirlik sağlar.

Bu kapsamlı kılavuz, temel kavramlarını ve fiyatlandırmasını anlamaktan, çeşitli popüler çerçeveler ve platformlarla entegre etmeye kadar, Resend API'sine başlamak için bilmeniz gereken her şeyi size adım adım anlatacaktır.

💡
Harika bir API Test aracı mı arıyorsunuz? Harika API Dokümantasyonu oluşturur?

Geliştirici Ekibinizin maksimum verimlilikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılıyor ve Postman'in yerini çok daha uygun bir fiyata alıyor!
button

Resend Nedir?

Resend, geliştiriciler için oluşturulmuş bir e-posta API platformudur. Daha eski e-posta hizmet sağlayıcılarına (ESP'ler) kıyasla üstün bir geliştirici deneyimi sağlamayı amaçlar. Temel özellikler şunları içerir:

Resend, kullanım kolaylığı, güvenilirlik ve modern web geliştirme iş akışlarıyla iyi entegre olma konularına odaklanarak, SendGrid, Mailgun veya AWS SES gibi yerleşik oyunculara daha modern, geliştirici merkezli bir alternatif olarak konumlandırır.

Resend Fiyatlandırması Nedir?

Resend, aylık gönderilen e-posta sayısına göre katmanlı bir fiyatlandırma yapısı sunar ve işlem ve pazarlama e-postaları için ayrı değerlendirmeler yapar (ancak fiyatlandırma sayfası öncelikle işlem planlarını ayrıntılı olarak açıklar).

İşlem e-posta planlarının (yazıldığı sırada) bir dökümü:

Ücretsiz Plan:

Pro Planı:

Ölçek Planı:

Kurumsal Plan:

Temel Hususlar:

Ücretsiz plan, küçük projeler veya test amaçları için yeterince cömerttir. Pro ve Ölçek planları, artan e-posta hacimleri ve özellik gereksinimleri olan büyüyen uygulamalara hitap eder. Kurumsal plan, büyük ölçekli operasyonlar için özel çözümler sunar.

Resend'e Başlarken

E-posta göndermeden önce, Resend hesabınızı ayarlamanız ve gönderme alan adınızı yapılandırmanız gerekir.

1. Kaydolun ve bir API Anahtarı Oluşturun

2. Alan Adınızı Doğrulayın

Profesyonel görünen e-postalar göndermek ve spam filtrelerinden kaçınmak için, sahip olduğunuz bir alan adını doğrulamalısınız. Doğrulanmamış alan adlarından veya onboarding@resend.dev gibi varsayılan adreslerden göndermek yalnızca ilk test için uygundur.

3. Test E-postaları Gönderme

Geliştirme sırasında, alan adınızın itibarını etkilemeden veya yanlışlıkla gerçek kullanıcılara göndermeden e-posta göndermeyi test etmek çok önemlidir. Resend, farklı senaryoları test etmek için özel e-posta adresleri sağlar:

Bu test adreslerini kullanmak, entegrasyonunuzu doğrulamanıza ve geri dönme ve şikayet olayları için web kancası işleyicilerini güvenli bir şekilde test etmenize olanak tanır.

Resend'i Çerçevelerle Entegre Etme

Resend, çeşitli diller ve çerçeveler için resmi SDK'lar ve basit entegrasyon yöntemleri sağlar. Sağlanan belgelere göre bazı popüler örnekleri ele alacağız. Temel kavram genellikle şunları içerir:

  1. Resend SDK'sını (varsa) yüklemek veya standart HTTP isteklerini kullanmak.
  2. API anahtarınızla Resend istemcisini başlatmak (güvenli bir şekilde yüklenir, genellikle ortam değişkenlerinden).
  3. from, to, subject ve html veya react gibi parametrelerle emails.send yöntemini (veya eşdeğerini) çağırmak.

Next.js ile Gönderme

Next.js, popüler bir React çerçevesidir. Resend, özellikle React Email ile güzel bir şekilde entegre olur.

1. Yükle:

npm install resend
# veya
yarn add resend
# veya
pnpm add resend

2. E-posta Şablonu Oluştur (İsteğe bağlı ancak önerilir): E-posta gövdeniz için React Email kullanın veya basit bir React bileşeni oluşturun.

// components/email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Hoş Geldiniz, {firstName}!</h1>
  </div>
);

3. API Rotası Oluştur: E-postayı göndermek için bir API rotası işleyicisi oluşturun.

// app/api/send/route.ts (Uygulama Yönlendiricisi Örneği)
import { EmailTemplate } from '../../../components/email-template'; // Gerekirse yolu ayarlayın
import { Resend } from 'resend';

// .env.local dosyanızda RESEND_API_KEY'in ayarlandığından emin olun
const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  try {
    const { data, error } = await resend.emails.send({
      from: 'Adınız Soyadınız <siz@dogrulanmisalanadiniz.com>', // Doğrulanmış alan adınızı kullanın
      to: ['delivered@resend.dev'], // Alıcı veya test adresiyle değiştirin
      subject: 'Resend ve Next.js\'den Merhaba!',
      react: EmailTemplate({ firstName: 'Test' }), // Şablonunuza özellikler geçirin
      // Alternatif olarak, `html` kullanın:
      // html: '<strong>İşe yarıyor!</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 (Sayfalar Yönlendiricisi Örneği - içe aktarmaları/yanıtı uyarlayın)
// 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 { // Daha iyi hata işleme için try...catch eklendi
//     const { data, error } = await resend.emails.send({
//       from: 'Adınız Soyadınız <siz@dogrulanmisalanadiniz.com>',
//       to: ['delivered@resend.dev'],
//       subject: 'Merhaba dünya',
//       react: EmailTemplate({ firstName: 'John' }),
//     });
//
//     if (error) {
//       return res.status(400).json(error);
//     }
//
//     res.status(200).json(data);
//   } catch (e) {
//      res.status(500).json({ error: 'Dahili Sunucu Hatası' });
//   }
// };

4. Tetikleyici: Ön uçunuzdan (örneğin, bir form gönderiminden sonra) fetch veya axios gibi bir kitaplık kullanarak bu API uç noktasını çağırın. Yer tutucu değerleri gerçek doğrulanmış alan adınız ve alıcı listelerinizle değiştirmeyi unutmayın.

Astro ile Gönderme

Astro, aynı zamanda sunucu tarafı oluşturmayı (SSR) destekleyen modern bir statik site oluşturucusudur.

1. Resend'i Yükleyin:

npm install resend
# veya
yarn add resend
# veya
pnpm add resend

2. SSR Adaptörü Yükleyin: Astro'nun isteğe bağlı olarak sunucu tarafı kodunu çalıştırmak için bir SSR adaptörüne ihtiyacı vardır. Dağıtım hedefiniz için uygun bir tane yükleyin (örneğin, @astrojs/node, @astrojs/vercel, @astrojs/cloudflare).

npx astro add node # Node.js adaptörü için örnek

astro.config.mjs dosyanızdaki adaptörün kurulum talimatlarını izleyin.

3. API Anahtarı Ekle: RESEND_API_KEY'inizi .env dosyanızda saklayın.

4. Astro Eylemi Oluştur: Astro Eylemlerini (yazıldığı sırada deneysel özellik, geçerli durum için Astro belgelerini kontrol edin) veya standart API uç noktalarını kullanın.

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

// RESEND_API_KEY'in import.meta.env aracılığıyla kullanılabilir olduğundan emin olun
const resend = new Resend(import.meta.env.RESEND_API_KEY);

export const server = {
  send: defineAction({
    // Örnek: Gerekirse girdi doğrulamasını tanımlayın
    // input: z.object({ email: z.string().email() }),
    handler: async (/* { email } - eğer girdi kullanılıyorsa */) => {
      try { // Try...catch eklendi
        const { data, error } = await resend.emails.send({
          from: 'Adınız Soyadınız <siz@dogrulanmisalanadiniz.com>',
          to: ['delivered@resend.dev'], // Alıcı ile değiştirin
          subject: 'Resend ve Astro\'dan Merhaba!',
          html: '<strong>Astro çalışıyor!</strong>',
          // Astro'da React'i ayarlarsanız React şablonlarını da kullanabilirsiniz
          // react: <YourAstroCompatibleReactEmail firstName="Astro" />
        });

        if (error) {
          console.error("Resend Hatası:", error); // Hatayı günlüğe kaydet
          // ActionError atmak, Astro'nun hataları düzgün bir şekilde işlemesine yardımcı olur
          throw new ActionError({
            code: 'BAD_REQUEST', // Veya hataya göre daha özel olun
            message: error.message || 'E-posta gönderilemedi',
          });
        }

        return data; // Başarı verilerini döndür
      } catch (e) {
         console.error("İşleyici Hatası:", e);
         // Yeniden atın veya yeni bir ActionError atın
         throw new ActionError({
             code: 'INTERNAL_SERVER_ERROR',
             message: 'Beklenmeyen bir hata oluştu.',
         });
      }
    },
  }),
};

// Alternatif: API Uç Noktası (örneğin, 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(); // Veri istek gövdesinden geliyorsa
//   try {
//     const { data, error } = await resend.emails.send({ /* ... e-posta parametreleri ... */ });
//     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: "Sunucu Hatası"}), { status: 500 });
//   }
// }

5. Tetikleyici: Astro bileşenlerinizden veya sayfalarınızdan, genellikle bir form gönderim işleyicisi içinde eylemi veya uç noktayı çağırın.

Bun ile Gönderme

Bun, yerleşik bir paketleyici, dönüştürücü, görev çalıştırıcısı ve npm istemcisi ile hızlı bir JavaScript çalışma zamanıdır.

1. Yükle:

bun install resend

2. E-posta Şablonu Oluştur (İsteğe bağlı): Next.js'e benzer şekilde, React e-posta şablonunuz için bir .tsx dosyası oluşturabilirsiniz.

// email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Hoş Geldiniz, {firstName}!</h1>
  </div>
);

3. Bun Sunucu Betiği Oluştur: Bun'ı kullanarak basit bir HTTP sunucusu çalıştırmak için bir betik (örneğin, index.tsx) oluşturun.

// index.tsx
import { Resend } from 'resend';
import { EmailTemplate } from './email-template'; // Aynı dizinde olduğunu varsayıyoruz

// API anahtarını ortam değişkenlerinden yükleyin
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
  console.error("Hata: RESEND_API_KEY ortam değişkeni ayarlanmadı.");
  process.exit(1); // Anahtar eksikse çık
}
const resend = new Resend(resendApiKey);

const server = Bun.serve({
  port: 3000,
  async fetch(req) { // 'req' argümanı eklendi
    // İsteğe bağlı: İstek yöntemini, yolunu vb. kontrol edin.
    // if (new URL(req.url).pathname !== '/send') {
    //   return new Response("Bulunamadı", { status: 404 });
    // }
    // if (req.method !== 'POST') {
    //    return new Response("Yöntem İzin Verilmiyor", { status: 405 });
    // }

    try {
      const { data, error } = await resend.emails.send({
        from: 'Adınız Soyadınız <siz@dogrulanmisalanadiniz.com>',
        to: ['delivered@resend.dev'],
        subject: 'Resend ve Bun\'dan Merhaba!',
        react: EmailTemplate({ firstName: 'Bun Kullanıcısı' }),
        // Veya html kullanın: '<strong>Bun çalışıyor!</strong>'
      });

      if (error) {
        console.error("Resend Hatası:", error);
        // Uygun bir JSON hata yanıtı döndürün
        return new Response(JSON.stringify({ error: error.message || 'E-posta gönderilemedi' }), {
          status: 500, // Veya hata türüne bağlı olarak 400
          headers: { 'Content-Type': 'application/json' },
        });
      }

      // Başarı yanıtını döndür
      return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
      });

    } catch (e) {
        console.error("Sunucu Hatası:", e);
        return new Response(JSON.stringify({ error: 'Dahili Sunucu Hatası' }), {
          status: 500,
          headers: { 'Content-Type': 'application/json' },
        });
    }
  },
  error(error) { // Sunucunun kendisi için temel bir hata işleyicisi eklendi
      return new Response(`<pre>${error}\\\\\\\\n${error.stack}</pre>`, {
          headers: { "Content-Type": "text/html" },
      });
  },
});

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

4. Çalıştır: RESEND_API_KEY=your_api_key bun run index.tsx kullanarak sunucuyu başlatın. http://localhost:3000'e erişmek (veya tanımladığınız belirli rotayı/yöntemi tetiklemek) e-postayı gönderecektir.

Nuxt ile Gönderme

Nuxt, popüler bir Vue.js çerçevesidir.

1. Yükle:

npm install resend
# veya
yarn add resend
# veya
pnpm add resend

2. Sunucu Rotası Oluştur: Nuxt, arka uç mantığı için bir server/ dizini kullanır. server/api/send.post.ts gibi bir dosya oluşturun (.post, POST isteklerini işlediğini gösterir).

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

// API Anahtarına güvenli bir şekilde erişin (örneğin, nuxt.config.ts içinde runtimeConfig aracılığıyla)
// Bkz: <https://nuxt.com/docs/guide/going-further/runtime-config>
const config = useRuntimeConfig();
const resend = new Resend(config.resendApiKey); // Anahtarın çalışma zamanı yapılandırmasında ayarlandığını varsayıyoruz

export default defineEventHandler(async (event) => {
  // İsteğe bağlı: Veri istekten geliyorsa gövdeyi okuyun
  // const body = await readBody(event);

  try {
    const data = await resend.emails.send({
      from: 'Adınız Soyadınız <siz@dogrulanmisalanadiniz.com>',
      to: ['delivered@resend.dev'],
      subject: 'Resend ve Nuxt\'tan Merhaba!',
      html: '<strong>Nuxt çalışıyor!</strong>',
      // Vue e-posta şablonlarını entegre edebilirsiniz (örneğin, vue-email kullanarak)
      // Bkz: <https://github.com/Dave136/vue-email>
    });

    // Nuxt 3, verileri otomatik olarak JSON olarak döndürmeyi işler
    return data;

  } catch (error: any) { // Mümkünse belirli hata türlerini yakalayın
    console.error("Resend Hatası:", error);
    // Nuxt'ın işleyebileceği, durum kodunu ayarlayan bir hata atın
    throw createError({
        statusCode: 400, // Veya 500
        statusMessage: 'E-posta gönderilemedi',
        data: error // İsteğe bağlı olarak hata ayrıntılarını ekleyin
    });
  }
});

// nuxt.config.ts dosyanızda, runtimeConfig'i tanımlayın:
// export default defineNuxtConfig({
//   runtimeConfig: {
//     resendApiKey: process.env.NUXT_RESEND_API_KEY, // Yalnızca sunucu tarafı
//     public: {
//       // İstemci tarafında erişilebilen genel anahtarlar
//     }
//   }
// })
// Ve .env dosyanızda NUXT_RESEND_API_KEY'i ayarlayın

3. Tetikleyici: /api/send uç noktasını (POST yöntemini kullanarak) Nuxt sayfalarınızdan veya bileşenlerinizden $fetch veya useFetch kullanarak çağırın.

Vercel İşlevleri ile Gönderme

Vercel İşlevleri, Next.js ile sorunsuz bir şekilde entegre olan veya tek başına kullanılabilen sunucusuz işlevlerdir. Yukarıdaki Next.js örneği zaten bir Vercel ortamında kullanımı göstermektedir. Vercel İşlevlerini Next.js olmadan kullanıyorsanız (örneğin, statik bir site oluşturucu veya Vercel'de dağıtılan başka bir çerçeve ile), yaklaşım benzerdir:

1. İşlev Oluştur: Projenizin api/ dizininde bir dosya oluşturun (örneğin, api/send.ts).

// api/send.ts (Standart Vercel İşlevi için Ö

Explore more

Fathom-R1-14B: Hindistan'dan Gelişmiş Yapay Zeka Muhakeme Modeli

Fathom-R1-14B: Hindistan'dan Gelişmiş Yapay Zeka Muhakeme Modeli

Yapay zeka hızla gelişiyor. FractalAIResearch/Fathom-R1-14B, 14.8 milyar parametreyle matematik ve genel akıl yürütmede başarılı.

5 June 2025

Mistral Code: İşletmeler için En Özelleştirilebilir Yapay Zeka Destekli Kodlama Asistanı

Mistral Code: İşletmeler için En Özelleştirilebilir Yapay Zeka Destekli Kodlama Asistanı

Mistral Code'u keşfedin: Kurumsal kullanıma özel, en özelleştirilebilir yapay zeka destekli kodlama asistanı.

5 June 2025

Claude Code'un 2025'te Yapay Zeka Kodlamasını Nasıl Dönüştürdüğü

Claude Code'un 2025'te Yapay Zeka Kodlamasını Nasıl Dönüştürdüğü

Claude Code, 2025'te yapay zeka destekli kodlamayı nasıl devrimleştiriyor? Özelliklerini, kullanımını ve Windsurf kısıtlamalarından sonra neden popüler olduğunu öğrenin. Geliştiriciler için okunması gereken!

5 June 2025

API Tasarım-Öncelikli Yaklaşımı Apidog'da Uygulayın

API'leri oluşturmanın ve kullanmanın daha kolay yolunu keşfedin

Ücretsiz Kaydolİndir