Overview

NextReady has a built-in waiting list feature that you can use to collect emails from your users on the landing page. Here's the end-to-end flow and components you need to know:

Database Schema

Add a WaitingList to the prisma/schema.prisma file with the following schema:

schema.prisma
model WaitingList {
  id          String    @id @default(nanoid())
  email       String    @unique
  name        String?
  attributes  Json?

  createdAt   DateTime  @default(now()) @db.Timestamptz(3) @map("created_at")
  updatedAt   DateTime  @updatedAt      @db.Timestamptz(3) @map("updated_at")

  @@map("waiting_lists")
}

Then, create the migration and update the database schema:

bash
bun prisma migrate dev

API Endpoint

Create an API endpoint to add emails to the waiting list in the app/api/waitings/route.ts file:

route.ts
import { db } from '@/lib/server/db'
import { parsePayload } from '@/lib/server/payload'
import { NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'

export const POST = async (req: NextRequest) => {
  const body = parsePayload(
    z.object({
      email: z.string().email(),
    }), await req.json()
  )
  if (body instanceof Error) {
    return NextResponse.json({
      error: body.message
    }, { status: 400 })
  }

  try {
    await db.waitingList.create({
      data: {
        email: body.email
      }
    })
  } catch (error) {
    // ignore if the email already exists
  }
  return NextResponse.json({}, { status: 202 })
}

Note. On a fresh installation, the waitlist feature is already on the home page. You can customize it by modifying the app/(landing)/page.tsx file. And, the admin panel to manage the waitlist is available at /~admin/waitings.