Registrarse

Descripción general de las funcionalidades

Envíe correos electrónicos y notificaciones a sus usuarios.

Nota: Este es contenido de ejemplo/marcador de posición con fines de demostración.

La aplicación incluye funcionalidad de correo electrónico para mensajes transaccionales y notificaciones a los usuarios.

Configuración del correo electrónico

Correo electrónico de Supabase (predeterminado)

De forma predeterminada, los correos electrónicos se envían a través de Supabase:

  • Correos de autenticación (registro, restablecimiento de contraseña, enlaces mágicos)
  • Verificación del correo electrónico
  • Confirmación del cambio de correo electrónico

SMTP personalizado

Para los correos electrónicos transaccionales, configure su propio proveedor SMTP:

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

Enviar correos electrónicos

Uso del servicio de correo electrónico

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

Uso de plantillas de correo electrónico

Cree plantillas de correo electrónico reutilizables:

// 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>
  );
}

// Enviar el correo electrónico
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,
});

Tipos de correo electrónico

Correos electrónicos transaccionales

Correos electrónicos desencadenados por acciones del usuario:

  • Correos de bienvenida
  • Confirmaciones de pedido
  • Restablecimientos de contraseña
  • Notificaciones de la cuenta
  • Actualizaciones de facturación

Correos electrónicos de marketing

Correos electrónicos promocionales y de fidelización:

  • Novedades del producto
  • Anuncios de funcionalidades
  • Boletines informativos
  • Secuencias de incorporación

Proveedores de correo electrónico

Proveedores recomendados

Resend - API de correo electrónico pensada para desarrolladores

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 - Plataforma de correo electrónico completa

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 - Correo electrónico transaccional rápido

npm install postmark

Notificaciones dentro de la aplicación

Sistema de notificaciones

Envíe notificaciones dentro de la aplicación a los usuarios:

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

Tipos de notificación

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

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

Obtener notificaciones

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

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

Marcar como leída

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

await markNotificationAsRead(notificationId);

Notificaciones en tiempo real

Use Supabase Realtime para enviar notificaciones instantáneas:

'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) => {
          // Mostrar una notificación toast
          toast.info(payload.new.title);
        }
      )
      .subscribe();

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

  return null;
}

Buenas prácticas para plantillas de correo electrónico

  1. Manténgalo simple - Texto sin formato y HTML mínimo
  2. Adaptado a móviles - La mayoría de los correos se leen en el móvil
  3. Llamadas a la acción claras - Haga que los botones de acción destaquen
  4. Personalice - Use el nombre del usuario y datos relevantes
  5. Pruebe la visualización - Compruébela en distintos clientes de correo
  6. Incluya texto sin formato - Ofrezca siempre una alternativa en texto
  7. Enlace para darse de baja - Obligatorio en los correos de marketing

Pruebas de correos electrónicos

Desarrollo local

En desarrollo, InBucket intercepta los correos electrónicos:

http://localhost:54324

Vista previa de correos electrónicos

Use React Email para previsualizar las plantillas:

npm run email:dev

Visite http://localhost:3001 para ver las vistas previas de los correos electrónicos.

Consejos de entregabilidad

  1. Autentique su dominio - Configure SPF, DKIM y DMARC
  2. Caliente su dominio - Empiece con volúmenes bajos
  3. Supervise las tasas de rebote - Manténgalas por debajo del 5 %
  4. Evite los desencadenantes de spam - No escriba todo en mayúsculas ni abuse de los signos de puntuación
  5. Aporte valor - Envíe solo correos relevantes y útiles
  6. Baja sencilla - Permita darse de baja con un solo clic