Funktionsübersicht

Hinweis: Dies sind Beispiel- bzw. Platzhalterinhalte zu Demonstrationszwecken.

Die Anwendung enthält E-Mail-Funktionen für transaktionale Nachrichten und Benachrichtigungen an Nutzer.

E-Mail-Konfiguration

Supabase-E-Mail (Standard)

Standardmäßig werden E-Mails über Supabase versendet:

• Authentifizierungs-E-Mails (Registrierung, Passwort-Zurücksetzung, Magic Links)
• E-Mail-Verifizierung
• Bestätigung der E-Mail-Änderung

Eigener SMTP-Server

Konfigurieren Sie für transaktionale E-Mails Ihren eigenen SMTP-Anbieter:

# .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-Mails versenden

Den E-Mail-Service verwenden

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-Mail-Vorlagen verwenden

Erstellen Sie wiederverwendbare E-Mail-Vorlagen:

// 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-Mail versenden
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-Mail-Typen

Transaktionale E-Mails

Durch Nutzeraktionen ausgelöste E-Mails:

• Willkommens-E-Mails
• Bestellbestätigungen
• Passwort-Zurücksetzungen
• Kontobenachrichtigungen
• Abrechnungsupdates

Marketing-E-Mails

Werbe- und Engagement-E-Mails:

• Produktupdates
• Ankündigungen neuer Funktionen
• Newsletter
• Onboarding-Sequenzen

E-Mail-Anbieter

Empfohlene Anbieter

Resend – Entwicklerfreundliche E-Mail-API

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 – Umfassende E-Mail-Plattform

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 – Schnelle transaktionale E-Mails

npm install postmark

In-App-Benachrichtigungen

Benachrichtigungssystem

Senden Sie In-App-Benachrichtigungen an Nutzer:

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',
});

Benachrichtigungstypen

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

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

Benachrichtigungen abrufen

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

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

Als gelesen markieren

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

await markNotificationAsRead(notificationId);

Echtzeit-Benachrichtigungen

Verwenden Sie Supabase Realtime für sofortige Benachrichtigungen:

'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-Benachrichtigung anzeigen
          toast.info(payload.new.title);
        }
      )
      .subscribe();

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

  return null;
}

Best Practices für E-Mail-Vorlagen

1. Einfach halten – Klartext und minimales HTML
2. Mobil responsiv – Die meisten E-Mails werden auf Mobilgeräten gelesen
3. Klare CTAs – Gestalten Sie Aktionsbuttons gut sichtbar
4. Personalisieren – Verwenden Sie den Namen des Nutzers und relevante Daten
5. Darstellung testen – Prüfen Sie die Darstellung in verschiedenen E-Mail-Clients
6. Klartext beifügen – Stellen Sie immer eine Textalternative bereit
7. Abmeldelink – Für Marketing-E-Mails erforderlich

E-Mails testen

Lokale Entwicklung

In der Entwicklung werden E-Mails von InBucket abgefangen:

http://localhost:54324

Vorschau von E-Mails

Verwenden Sie React Email, um eine Vorschau Ihrer Vorlagen anzuzeigen:

npm run email:dev

Rufen Sie http://localhost:3001 auf, um die E-Mail-Vorschauen zu sehen.

Tipps zur Zustellbarkeit

1. Authentifizieren Sie Ihre Domain – Richten Sie SPF, DKIM und DMARC ein
2. Wärmen Sie Ihre Domain auf – Beginnen Sie mit geringen Versandmengen
3. Überwachen Sie die Bounce-Raten – Halten Sie sie unter 5 %
4. Vermeiden Sie Spam-Auslöser – Verwenden Sie keine durchgehenden Großbuchstaben oder übermäßige Satzzeichen
5. Bieten Sie Mehrwert – Versenden Sie nur relevante, nützliche E-Mails
6. Einfache Abmeldung – Ermöglichen Sie die Abmeldung mit einem Klick