Özelliklere Genel Bakış

Not: Bu içerik, tanıtım amacıyla hazırlanmış örnek/yer tutucu bir içeriktir.

Uygulama, işlemsel mesajlar ve kullanıcı bildirimleri için e-posta işlevleri içerir.

E-posta Yapılandırması

Supabase E-postası (Varsayılan)

Varsayılan olarak e-postalar Supabase üzerinden gönderilir:

• Kimlik doğrulama e-postaları (kayıt, parola sıfırlama, magic link'ler)
• E-posta doğrulama
• E-posta değişikliği onayı

Özel SMTP

İşlemsel e-postalar için kendi SMTP sağlayıcınızı yapılandırın:

# .env
SMTP_HOST=smtp.example.com
SMTP_PORT=587
SMTP_USER=your-username
SMTP_PASSWORD=your-password
SMTP_FROM_EMAIL=noreply@yourdomain.com
SMTP_FROM_NAME=Your App Name

E-posta Gönderme

E-posta Servisini Kullanma

import { sendEmail } from '~/lib/email/send-email';

await sendEmail({
  to: 'user@example.com',
  subject: 'Welcome to Our App',
  html: '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
});

E-posta Şablonlarını Kullanma

Yeniden kullanılabilir e-posta şablonları oluşturun:

// lib/email/templates/welcome-email.tsx
import { EmailTemplate } from '~/lib/email/email-template';

interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}

export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <EmailTemplate>
      <h1>Welcome, {name}!</h1>
      <p>We're excited to have you on board.</p>
      <a href={loginUrl}>Get Started</a>
    </EmailTemplate>
  );
}

// E-postayı gönder
import { render } from '@react-email/render';
import { WelcomeEmail } from '~/lib/email/templates/welcome-email';

const html = render(
  <WelcomeEmail name="John" loginUrl="https://app.com/login" />
);

await sendEmail({
  to: 'john@example.com',
  subject: 'Welcome to Our App',
  html,
});

E-posta Türleri

İşlemsel E-postalar

Kullanıcı eylemleriyle tetiklenen e-postalar:

• Hoş geldin e-postaları
• Sipariş onayları
• Parola sıfırlamaları
• Hesap bildirimleri
• Faturalandırma güncellemeleri

Pazarlama E-postaları

Tanıtım ve etkileşim e-postaları:

• Ürün güncellemeleri
• Özellik duyuruları
• Bültenler
• Onboarding dizileri

E-posta Sağlayıcıları

Önerilen Sağlayıcılar

Resend - Geliştirici dostu e-posta API'si

npm install resend

import { Resend } from 'resend';

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

await resend.emails.send({
  from: 'noreply@yourdomain.com',
  to: 'user@example.com',
  subject: 'Welcome',
  html: emailHtml,
});

SendGrid - Kapsamlı e-posta platformu

npm install @sendgrid/mail

import sgMail from '@sendgrid/mail';

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

await sgMail.send({
  to: 'user@example.com',
  from: 'noreply@yourdomain.com',
  subject: 'Welcome',
  html: emailHtml,
});

Postmark - Hızlı işlemsel e-posta

npm install postmark

Uygulama İçi Bildirimler

Bildirim Sistemi

Kullanıcılara uygulama içi bildirimler gönderin:

import { createNotification } from '~/lib/notifications';

await createNotification({
  userId: user.id,
  title: 'New Message',
  message: 'You have a new message from John',
  type: 'info',
  link: '/messages/123',
});

Bildirim Türleri

type NotificationType = 'info' | 'success' | 'warning' | 'error';

await createNotification({
  userId: user.id,
  title: 'Payment Successful',
  message: 'Your subscription has been renewed',
  type: 'success',
});

Bildirimleri Getirme

import { getUserNotifications } from '~/lib/notifications';

const notifications = await getUserNotifications(userId, {
  limit: 10,
  unreadOnly: true,
});

Okundu Olarak İşaretleme

import { markNotificationAsRead } from '~/lib/notifications';

await markNotificationAsRead(notificationId);

Gerçek Zamanlı Bildirimler

Anlık bildirimler için Supabase Realtime kullanın:

'use client';

import { useEffect } from 'react';
import { useSupabase } from '@kit/supabase/hooks/use-supabase';

export function NotificationListener() {
  const supabase = useSupabase();

  useEffect(() => {
    const channel = supabase
      .channel('notifications')
      .on(
        'postgres_changes',
        {
          event: 'INSERT',
          schema: 'public',
          table: 'notifications',
          filter: `user_id=eq.${userId}`,
        },
        (payload) => {
          // Toast bildirimi göster
          toast.info(payload.new.title);
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [supabase]);

  return null;
}

E-posta Şablonları İçin En İyi Uygulamalar

1. Basit tutun - Düz metin ve minimum HTML
2. Mobil uyumlu olun - E-postaların çoğu mobil cihazlarda okunur
3. Net CTA'lar - Eylem butonlarını belirgin hale getirin
4. Kişiselleştirin - Kullanıcının adını ve ilgili verileri kullanın
5. Görüntülemeyi test edin - Farklı e-posta istemcilerinde kontrol edin
6. Düz metin ekleyin - Her zaman bir metin alternatifi sunun
7. Abonelikten çıkma bağlantısı - Pazarlama e-postaları için zorunludur

E-postaları Test Etme

Yerel Geliştirme

Geliştirme ortamında e-postalar InBucket tarafından yakalanır:

http://localhost:54324

E-postaları Önizleme

Şablonları önizlemek için React Email kullanın:

npm run email:dev

E-posta önizlemelerini görmek için http://localhost:3001 adresini ziyaret edin.

Teslim Edilebilirlik İpuçları

1. Alan adınızın kimliğini doğrulayın - SPF, DKIM ve DMARC kurun
2. Alan adınızı ısıtın - Düşük hacimlerle başlayın
3. Geri dönme oranlarını izleyin - %5'in altında tutun
4. Spam tetikleyicilerinden kaçının - Tamamen büyük harf ve aşırı noktalama kullanmayın
5. Değer sunun - Yalnızca ilgili ve faydalı e-postalar gönderin
6. Kolay abonelikten çıkma - Tek tıklamayla yapılabilir hale getirin