DEV Community: SlotKit

Building automated booking reminders with Vercel Cron Jobs and Resend

SlotKit — Mon, 01 Jun 2026 15:00:19 +0000

One of the most requested features in any booking platform is simple:
"Send me a reminder before my appointment."

It sounds trivial. But when you start thinking about the infrastructure —
scheduled jobs, email queues, timezone handling — it gets complex fast.

Here's how I built automated booking reminders in Next.js 15 using
Vercel Cron Jobs and Resend, with zero additional infrastructure.

The problem with scheduled tasks in Next.js

Next.js is a request-driven framework. It handles HTTP requests — it doesn't
natively run background jobs on a schedule.

Traditional solutions involve:

A separate cron server (more infrastructure to manage)
A queue service like BullMQ or AWS SQS (overkill for most projects)
A third-party scheduler service (another paid dependency)

Vercel Cron Jobs solve this cleanly. They're available on all plans
including Hobby, configured in a single JSON file, and trigger your
existing API routes on a schedule.

Setting up Vercel Cron Jobs

Create a vercel.json in the root of your project:

{
  "crons": [
    {
      "path": "/api/cron/reminders",
      "schedule": "0 8 * * *"
    }
  ]
}

0 8 * * * runs every day at 8:00 AM UTC. That's it — no additional
setup, no dashboard configuration beyond deploying your app.

Securing the endpoint

Vercel sends requests to your cron endpoint from their infrastructure.
You need to verify these requests come from Vercel and not from a random
external caller.

The standard approach: a shared secret in an Authorization header.

export async function GET(request: NextRequest) {
  const authHeader = request.headers.get('authorization')

  if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }

  // proceed with the job
}

Set CRON_SECRET in your Vercel environment variables. Generate a
secure value with:

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Finding tomorrow's bookings

The reminder logic is straightforward: find all confirmed bookings
that start tomorrow, then send an email for each one.

const tomorrow = new Date()
tomorrow.setDate(tomorrow.getDate() + 1)
tomorrow.setHours(0, 0, 0, 0)

const tomorrowEnd = new Date(tomorrow)
tomorrowEnd.setHours(23, 59, 59, 999)

const upcomingBookings = await db
  .select()
  .from(bookings)
  .where(
    and(
      eq(bookings.status, 'confirmed'),
      gte(bookings.startTime, tomorrow),
      lte(bookings.startTime, tomorrowEnd)
    )
  )

Two things worth noting:

Only confirmed bookings. Pending bookings (waiting for payment
confirmation) are excluded. You don't want to remind someone about
an appointment that isn't actually confirmed yet.

Midnight boundaries. Setting setHours(0, 0, 0, 0) and
setHours(23, 59, 59, 999) ensures you capture the full day
regardless of what time the cron runs.

Sending the reminder email with Resend

For each booking, we fetch the related service, resource, and tenant
data, then send the reminder:

for (const booking of upcomingBookings) {
  try {
    const [service] = await db.select().from(services)
      .where(eq(services.id, booking.serviceId)).limit(1)

    const [resource] = await db.select().from(resources)
      .where(eq(resources.id, booking.resourceId)).limit(1)

    const [tenant] = await db.select().from(tenants)
      .where(eq(tenants.id, booking.tenantId)).limit(1)

    if (!service || !resource || !tenant) continue

    const html = await render(
      BookingReminderEmail({
        customerName: booking.customerName,
        businessName: tenant.name,
        serviceName: service.name,
        resourceName: resource.name,
        date: formatDate(booking.startTime),
        startTime: formatTime(booking.startTime),
        endTime: formatTime(booking.endTime),
      })
    )

    await resend.emails.send({
      from: process.env.RESEND_FROM_EMAIL!,
      to: booking.customerEmail,
      subject: `Reminder: your appointment tomorrow at ${tenant.name}`,
      html,
    })

    sent++
  } catch (error) {
    console.error(`Failed to send reminder for booking ${booking.id}:`, error)
    failed++
  }
}

return NextResponse.json({ success: true, sent, failed, total: upcomingBookings.length })

The try/catch per booking is intentional — if one email fails, the
loop continues and sends the remaining reminders. A single Resend
error shouldn't block everyone else's reminders.

The email template

Using React Email for the reminder template keeps things consistent
with the rest of the email system:

export function BookingReminderEmail({
  customerName,
  businessName,
  serviceName,
  resourceName,
  date,
  startTime,
  endTime,
}: BookingReminderEmailProps) {
  return (
    <Html>
      <Preview>Reminder: your appointment tomorrow at {businessName}</Preview>
      <Body>
        <Container>
          <Heading>Reminder: appointment tomorrow 🗓️</Heading>
          <Text>
            Hi {customerName}, this is a reminder for your appointment tomorrow.
          </Text>
          <Section>
            <Text><strong>Service:</strong> {serviceName}</Text>
            <Text><strong>With:</strong> {resourceName}</Text>
            <Text><strong>Date:</strong> {date}</Text>
            <Text><strong>Time:</strong> {startTime} – {endTime}</Text>
          </Section>
        </Container>
      </Body>
    </Html>
  )
}

Testing locally

Vercel Cron Jobs only trigger in production. For local development,
call the endpoint manually with the cron secret:

PowerShell:

$secret = (Get-Content .env.local | Select-String "CRON_SECRET").ToString().Split("=")[1]
Invoke-RestMethod -Uri "http://localhost:3000/api/cron/reminders" `
  -Headers @{Authorization="Bearer $secret"}

curl:

curl -H "Authorization: Bearer YOUR_CRON_SECRET" \
  http://localhost:3000/api/cron/reminders

The endpoint returns the count of sent and failed emails — useful
for verifying everything worked correctly.

What I learned

Vercel Cron Jobs are underrated. For most booking or scheduling
use cases, they're all you need. No queue infrastructure, no worker
processes, no additional cost.

Fail per item, not per batch. The try/catch inside the loop
pattern is important. A single failed email shouldn't abort the
entire reminder run.

Test with real data. Insert a booking with startTime = tomorrow
directly in your database and verify the email arrives before deploying.
Cron bugs are annoying to debug in production.

This reminder system is part of SlotKit — a production-ready
booking SaaS template for agencies built on Next.js 15, Supabase,
Stripe, and Resend.

If you're building booking functionality for clients and tired of
rebuilding the same infrastructure: slotkit.dev

Happy to answer questions in the comments.

How I stopped rebuilding the same booking logic for every agency client

SlotKit — Sat, 30 May 2026 17:45:28 +0000

Every agency developer knows this feeling.

A new client comes in. They want a booking platform — a salon, a clinic, a gym,
a restaurant. Doesn't matter. And you think: "I've built this before."

Because you have. Three times last year. With different stacks, different
architectures, different levels of quality. Each time starting from scratch.

This is the story of how I decided to stop doing that.

The problem with booking systems

On the surface, booking looks simple. A customer picks a date, picks a time,
confirms. Done.

But the moment you go deeper, the complexity explodes:

Availability calculation. You need to know which time slots are free for
each resource (a staff member, a room, equipment). That means reading working
hours, existing bookings, and computing gaps — correctly, for every request.

Race conditions. Two customers book the same slot at the same millisecond.
Who gets it? Without proper handling, both. You now have a double booking.

Multi-tenancy. If you're an agency, you're not building for one client.
You're building the same infrastructure for ten clients. Each one needs isolated
data, separate working hours, separate services.

Payments. If the service has a price, you need Stripe, webhooks, and
payment confirmation before you confirm the booking.

Each of these is solvable. But solving all of them, correctly, every time,
for every client? That's 80-120 hours of plumbing that isn't billable as
innovation.

The architecture decision: row-level multi-tenancy

The first key decision was how to handle multi-tenancy.

Two common approaches:

Separate database per tenant — maximum isolation, but operationally complex and expensive
Shared database with tenant_id — simpler to operate, needs careful access control

I went with option 2, using a tenant_id column on every table and
enforcing isolation at the API layer.

// Every query is scoped to the current tenant
const tenantResources = await db
  .select()
  .from(resources)
  .where(eq(resources.tenantId, currentUser.tenantId))

The critical security rule: never trust tenantId from the request body.
Always derive it from the authenticated user's session. This prevents a
malicious actor from accessing another tenant's data by forging a request.

// ❌ Wrong — trusts client input
const { tenantId, resourceId } = body

// ✅ Correct — derives tenantId from the resource itself
const [resource] = await db
  .select({ tenantId: resources.tenantId })
  .from(resources)
  .where(eq(resources.id, resourceId))
  .limit(1)

The availability engine

The availability calculator is the heart of any booking system.

The logic:

Load working hours for the resource on the requested day
Load existing bookings for that day
Generate time slots of the requested duration
Filter out slots that overlap with existing bookings

function getAvailableSlots(
  workingHours: { startTime: string; endTime: string }[],
  existingBookings: { startTime: Date; endTime: Date }[],
  duration: number // minutes
): TimeSlot[] {
  const slots: TimeSlot[] = []

  for (const hours of workingHours) {
    let current = parseTime(hours.startTime)
    const end = parseTime(hours.endTime)

    while (addMinutes(current, duration) <= end) {
      const slotEnd = addMinutes(current, duration)

      const hasConflict = existingBookings.some(booking =>
        current < booking.endTime && slotEnd > booking.startTime
      )

      if (!hasConflict) {
        slots.push({ startTime: formatTime(current), endTime: formatTime(slotEnd) })
      }

      current = addMinutes(current, duration)
    }
  }

  return slots
}

Preventing race conditions

The availability check and the booking creation are two separate operations.
Between them, another user could book the same slot.

The solution: wrap the entire booking creation in a database transaction with
a conflict check.

await db.transaction(async (tx) => {
  // Check again inside the transaction
  const conflict = await tx
    .select()
    .from(bookings)
    .where(
      and(
        eq(bookings.resourceId, resourceId),
        lt(bookings.startTime, endDateTime),
        gt(bookings.endTime, startDateTime),
        ne(bookings.status, 'cancelled')
      )
    )
    .limit(1)

  if (conflict.length > 0) {
    throw new Error('SLOT_NOT_AVAILABLE')
  }

  // Safe to create
  await tx.insert(bookings).values({ ... })
})

If two requests arrive simultaneously, the database transaction ensures only
one succeeds. The other gets a clear error and the user is asked to choose
a different slot.

Stripe Checkout integration

For paid bookings, the flow is:

Customer fills in their details
We create a pending booking in the database
We create a Stripe Checkout Session with the booking ID in metadata
Customer redirects to Stripe, completes payment
Stripe fires a webhook
We confirm the booking and send the confirmation email

The key insight: send the confirmation email only after the webhook,
not when the booking is created. A pending booking is not a confirmed booking.

// In the webhook handler
if (event.type === 'checkout.session.completed') {
  const { bookingId } = event.data.object.metadata

  await db.update(bookings)
    .set({ status: 'confirmed', paymentStatus: 'paid' })
    .where(eq(bookings.id, bookingId))

  await sendConfirmationEmail({ bookingId })
}

The result: SlotKit

After building all of this, I packaged it into SlotKit — a production-ready
Next.js 15 booking SaaS template for agencies.

It includes everything described in this article, plus:

5 vertical presets (salon, clinic, fitness, professional, restaurant) — each with pre-seeded services, resources, and working hours
Admin dashboard for managing bookings, resources, and services
Multi-language support (EN/IT out of the box)
Security hardened: Zod validation, rate limiting, OWASP headers

The idea is simple: an agency buys it once, deploys it for every client that
needs booking functionality. No more rebuilding the same plumbing.

If you're interested: slotkit.dev

What I learned

Building this taught me a few things worth sharing:

Database transactions are underused. Most developers check availability
and then create the booking in two separate queries. Wrapping them in a
transaction is the only correct way to prevent race conditions.

Never trust the client. Any identifier that controls data access should
be derived server-side, never taken from the request body.

Emails should reflect reality. Sending a "booking confirmed" email
before the payment clears creates trust problems. The webhook pattern solves
this cleanly.

Happy to answer any questions in the comments.