Sähköpostien rakentaminen ja lähetys on perinteisesti ollut SaaS MVP -kehityksen turhauttavin vaihe. Taistelu rikkoutuneen HTML-koodin, huonon luettavuuden ja monimutkaisten SMTP-asetusten kanssa vie tunteja.

Nykyaikainen vibe-koodaus muuttaa tämän työnkulun täysin. Yhdistämällä Cursor-tekoälyeditorin, React Email -komponentit ja Resend-palvelun rakennat ammattimaiset transaktiosähköpostit minuuteissa ilman manuaalista koodausta.

Tässä oppaassa käymme läpi suoraviivaisen arkkitehtuurin ja valmiit promptaus-mallit, joilla automatisoit sähköpostien lähetysprosessin osaksi sovellustasi.

---

Arkkitehtuuri: Moderni sähköpostien lähetys

Unohda perinteiset sähköpostipalvelimet ja monimutkaiset integraatiot. Moderni sovelluskehitys tekoälyllä nojaa selkeään, tapahtumapohjaiseen arkkitehtuuriin.

[Käyttäjän toiminta sovelluksessa]
               │
               ▼
[SaaS-taustajärjestelmä (esim. Next.js / Supabase)]
               │
               ▼ (Laukaisee tapahtuman)
[Cursor-generoitu API-reitti & React Email -pohja]
               │
               ▼ (Lähettää JSON-datan)
[Resend API] ───► [Vastaanottajan sähköposti]

Tässä mallissa React Email hoitaa visuaalisen puolen, Cursor tekoäly kirjoittaa integraatiokoodin, ja Resend vastaa luotettavasta toimituksesta.

---

Vaihe 1: Promptaa sähköpostipohja Cursorilla

React Email mahdollistaa sähköpostien suunnittelun tutuilla React-komponenteilla ja Tailwind-tyyleillä. Sinun ei tarvitse kirjoittaa näitä komponentteja itse alusta alkaen.

Avaa Cursor-tekoälyeditori (Composer-tila tai Ctrl+K / Cmd+K) ja käytä seuraavaa promptia sähköpostipohjan luomiseen:

Luo moderni React Email -komponentti tervetuliaisviestille (WelcomeEmail.tsx).
Käytä Tailwind-tyylejä ja seuraavia vaatimuksia:
1. Tumma teema (tummanharmaa tausta, valkoinen teksti, violetti korostusväri).
2. Selkeä CTA-painike (Call to Action) palveluun kirjautumista varten.
3. Personoidut muuttujat: { name } ja { loginUrl }.
4. Alatunniste, jossa on yrityksen osoite ja linkki tilauksen hallintaan.
Varmista, että koodi käyttää vain virallisia @react-email/components -kirjastoja.

Cursor luo sinulle puhtaan komponenttitiedoston, joka on heti valmis käytettäväksi. Voit esikatsella sitä paikallisesti React Emailin omalla kehitysympäristöllä ennen tuotantoon vientiä.

---

Vaihe 2: Resend-integraation API-rakenne

Kun sähköpostipohja on valmis, tarvitset API-reitin sen lähettämiseen. Resend tarjoaa erittäin kevyen ja nopean rajapinnan.

Pyydä Cursor-tekoälyä luomaan API-reitti sovellukseesi. Tässä on looginen blueprint siitä, miten API käsittelee pyynnön ja välittää sen Resendille:

{
  "endpoint": "/api/send-welcome",
  "method": "POST",
  "requestBody": {
    "email": "kayttaja@esimerkki.fi",
    "name": "Matti"
  },
  "resendPayload": {
    "from": "Oma SaaS ",
    "to": ["kayttaja@esimerkki.fi"],
    "subject": "Tervetuloa mukaan!",
    "react": "WelcomeEmail({ name: 'Matti', loginUrl: 'https://oma-saas.fi/login' })"
  }
}

Kun ohjeistat Cursoria luomaan tämän reitin (esimerkiksi Next.js App Routeriin), käytä tätä promptia:

Luo Next.js Route Handler tiedostoon app/api/send/route.ts.
Reitin pitää ottaa vastaan POST-pyyntö, joka sisältää sähköpostiosoitteen ja nimen.
Käytä Resend SDK -kirjastoa ja aiemmin luotua WelcomeEmail-komponenttia sähköpostin lähettämiseen.
Hae Resend API-avain ympäristömuuttujasta RESEND_API_KEY.
Lisää virheidenkäsittely ja palauta selkeä JSON-vastaus onnistumisesta tai epäonnistumisesta.

---

Vaihe 3: Sähköpostiautomaatio ja tapahtumien laukaisu

Pelkkä API-reitti ei riitä – sähköpostien lähetys pitää kytkeä osaksi sovelluksen tapahtumia. SaaS MVP -vaiheessa sähköpostiautomaatio kannattaa pitää mahdollisimman suoraviivaisena.

Tässä on kolme yleisintä triggeriä transaktiosähköposteille:

1. Käyttäjän rekisteröityminen: Kun uusi käyttäjä luo tilin, tietokanta (esim. Supabase tai Prisma) laukaisee webhookin tai kutsuu suoraan luotua API-reittiä.

2. Maksutapahtuma: Stripe-webhook vastaanottaa tiedon onnistuneesta maksusta ja laukaisee kuitin lähetyksen Resendin kautta.

3. Salasanan palautus: Käyttäjä pyytää linkkiä, jolloin taustajärjestelmä luo kertakäyttöisen tokenin ja lähettää sen sähköpostitse.

Esimerkki: Automaation työnkulku tietokantatapahtumasta

[Uusi rivi 'users'-tauluun]
          │
          ▼ (Supabase Edge Function / Next.js Middleware)
[Tarkista käyttäjän tiedot]
          │
          ▼ (Kutsu API-reittiä)
POST /api/send-welcome  ───► [Resend lähettää viestin]

Tämä arkkitehtuuri pitää huolen siitä, että sovelluksesi käyttöliittymä pysyy nopeana, sillä sähköpostien lähetys tapahtuu taustalla asynkronisesti.

---

Vibe-koodaajan tarkistuslista tuotantoon

Ennen kuin painat "Publish"-painiketta ja aloitat sähköpostien lähetyksen todellisille asiakkaille, varmista että nämä kolme asiaa ovat kunnossa:

  • Verifioi domain Resendissä: Lisää tarvittavat DNS-tietueet (DKIM, SPF ja MX) domain-palveluntarjoajasi hallintaan. Tämä takaa, että viestit eivät päädy roskapostiin.
  • Käytä testitilaa kehityksessä: Resend tarjoaa testing@resend.dev -osoitteen, jolla voit testata lähetystä ilman oman domainin asetuksia.
  • Seuraa analytiikkaa: Resendin hallintapaneelista näet suoraan viestien toimitusasteen (delivery rate), avausprosentit ja mahdolliset virheet.

---

Siirry ideasta toteutukseen

Sähköpostien rakentamisen ei tarvitse olla tuntikausien taistelu CSS-tyylien ja SMTP-asetusten kanssa. Cursor tekoäly hoitaa koodin kirjoittamisen, React Email tarjoaa valmiit komponentit ja Resend varmistaa, että viestit menevät perille.

Mikä on seuraava transaktiosähköposti, jonka aiot rakentaa tällä pinolla? Kokeile luoda ensimmäinen tervetuliaisviestisi jo tänään ja katso, kuinka nopeasti saat sen toimimaan.