How to send a welcome email in a Next.js app

The short answer

Save the new account, then send one email to that address, after the response has gone back so a slow email provider never slows sign-up. For a single email, that is the whole job.

With Kicklace you skip the writing and the sending code. Your server tells Kicklace in one line that someone signed up, and the welcome you switched on goes out in your voice.

The plain way

1. Pick an email provider and verify your domain with it. That means DNS records.
2. Write the email as a template in your code.
3. In the server action or route handler that creates the account, call the provider once the user is saved.
4. Wrap that call in after from next/server. Next.js runs it once the response is finished, so sign-up never waits on email.
5. Decide what a retry does, so nobody gets two welcomes.

That is a fine way to send one email. It gets heavy at the second and third: the nudge for someone who signed up and never came back, the thank-you when they pay. Each needs its own trigger, its own wait, and a way to stop when the person moves on.

With Kicklace

1. Make a workspace. On its setup screen, at the Hear it step, copy the setup token.
2. In your project, run npx kicklace init --setup <token>. It adds the tag to your root layout, adds kicklace to package.json, and writes your two keys into .env.local.
3. In the code that creates the account, add one line:

import { after } from "next/server";
import { Kicklace } from "kicklace";

const kl = new Kicklace(process.env.KICKLACE_SECRET_KEY!);

// inside your sign-up action, once the user is saved
after(() => kl.track("signup", { email: user.email, idempotencyKey: `signup:${user.id}` }));

The idempotencyKey makes a retry land once. track never throws: a refusal comes back as an answer. And because the call sits inside after, sign-up does not wait on it.

4. Open the Lifecycle map. Kicklace writes your first emails when you make the map. Open the one at Signed up, read it, and change what you like. An email with no words yet has Write it for me.
5. Switch the sequence on. First Kicklace shows who would have got it over the last 30 days. Send yourself a test before you do.
6. Sign up to your own app once and watch it arrive.

When someone arrives at a stage, its first email goes within about a minute. Each person gets each email once, and nothing is sent for something that happened before you switched it on. The full walkthrough is Add Kicklace to a Next.js app.

You can see the whole thing on your own site in the demo, with no sign-up.

What the email should say

A welcome email has one job: get the person to their first useful moment. Say who you are, what to do first, and how to reach you. Leave out the tour of every feature.

Subject: Welcome to [your app]

Hi {{first_name}},

Thanks for signing up. The quickest way to see what [your app] does is to [the first thing to do]. It takes a few minutes.

If you get stuck or something is missing, reply to this email.

[Your name]

Kicklace fills {{first_name}}. Someone it only knows by email is greeted as "there". Replies go to your own email address.

More in a SaaS welcome email template.

FAQ

Do I need to verify a domain first?

No. Until you verify your own domain, Kicklace sends with your name on it from its own address, up to 50 a day. There are no DNS records to set up. More on sending without DNS setup.

Does this work if I use Clerk or Supabase for sign-up?

Yes. Clerk is a built-in connection, covered in welcome emails for Clerk. Supabase takes a few lines in your own code, covered in welcome emails after a Supabase sign-up.

What does it cost?

Kicklace is free up to 1,000 contacts, sending from its own address with your name on it. Your own domain is part of Starter, $25 a month. The details are on pricing.