Next.js Notion Waitlist Template

Resend is used to send confirmation emails to users who join the waitlist.

1. Sign up for a Resend account.
2. Add and verify your custom domain via DNS records.
3. Generate an API key from the Resend dashboard to use as RESEND_API_KEY.

To run the project locally, fork the repository, clone it, and follow these steps. This project uses bun as the package manager.

1. Install dependencies:

   bun install

2. Create a .env.local file in the root directory and populate it with the required environment variables.
3. Start the development server:

   bun dev

4. (Optional) To run the email server, use:

   bun email

To use Notion as your waitlist database, follow these steps:

1. Create a Database: In your Notion workspace, create a new database with exactly these two columns:
   • Name: Type Title
   • Email: Type Email
2. Get Notion Secret: Create an internal integration at the Notion Integrations page to obtain your NOTION_SECRET.
3. Get Database ID: Open your database in a browser. The ID is the string in the URL between the workspace name and the question mark.
   • Format: https://www.notion.so/{DATABASE_ID}?v={NUMBERS}

Upstash Redis is used to rate limit signups.

1. Sign up for a free account at Upstash.
2. Create a new Redis database.
3. Retrieve the REST URL and the TOKEN from your Upstash dashboard to use in your environment variables.

The following environment variables must be provided for the template to function. You can use .env.example as a reference for local development or provide them during Vercel deployment.

NOTION_SECRET
NOTION_DB
RESEND_API_KEY
UPSTASH_REDIS_REST_URL
UPSTASH_REDIS_REST_TOKEN

The NotionWaitlistEmail component accepts the following props:

The cn function is a utility used to conditionally merge Tailwind CSS classes and resolve conflicts between them. It combines clsx (for conditional class logic) and tailwind-merge (to ensure the last class in the list wins when there are Tailwind conflicts, such as p-4 vs p-2).

Use this function whenever you need to apply dynamic or conditional styles to a component while ensuring Tailwind CSS class precedence is handled correctly.

import { cn } from '@/lib/utils';

// Example usage:
const className = cn('text-red-500', isActive && 'font-bold', 'p-4 p-2');
// Result will correctly resolve Tailwind conflicts (e.g., p-2 will override p-4)

The NotionWaitlistEmail component is a React Email template used to send waitlist notification emails via Resend. It accepts a userFirstname prop to personalize the greeting and the email preview text.

To use it, import the component and pass the user's first name as a prop. This component is built using @react-email/components.

import { NotionWaitlistEmail } from './emails';

// Example usage in a Resend sending function
const emailHtml = render(<NotionWaitlistEmail userFirstname="Tyler" />);