Skip to main content
Version: Next

Create a Waiting List

A waiting list is a great way to generate early interest in your SaaS product before launch. This guide will walk you through setting up a waiting list using SaaS Developer Templates.

Step 1: Add the Form to a Page​

  1. Open src/app/page.tsx or create a new page pages/waitlist.tsx.

  2. Import and use the form component:

    /* <--- your imports ----> */
    import { Waitlist } from '@/components/waitlist/Waitlist';

    export default function Home() {
      return (
        <PageWithHeaderFooter>
          {/* <--- your imports ----> */}
          <Waitlist />
        </PageWithHeaderFooter>
      );
    }

Step 5: Test Your Setup​

  1. Run your Next.js development server: 
    npm run dev
  2. Visit http://localhost:3000 OR http://localhost:3000/waitlist to test the form.
  3. Enter an email and check if it gets stored in your database using Prisma Studio: 
    npx prisma studio

Conclusion​

Your waiting list is now set up and ready to capture user interest before your SaaS launch! 🎉

For further enhancements, consider integrating an email service to send confirmation emails.

Proceed to the next step: Configure Authentication.