Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lakshaybhushan/nextjs-notion-waitlist-template

A template repository for creating a waitlist using Next.js 14, Notion as a CMS, Upstash Redis for rate limiting and Resend for sending emails with a custom domain.
https://github.com/lakshaybhushan/nextjs-notion-waitlist-template

magic-ui nextjs notion react-email resend-email shadcn-ui tailwindcss upstash upstash-ratelimit upstash-redis vercel

Last synced: 5 days ago
JSON representation

A template repository for creating a waitlist using Next.js 14, Notion as a CMS, Upstash Redis for rate limiting and Resend for sending emails with a custom domain.

Awesome Lists containing this project

README 

        
Next.js + Notion — Wailtist Template






















![GithubBanner](./app/opengraph-image.png)



This is a template repository for creating a waitlist using Next.js 14, Notion as a CMS, Upstash Redis for rate limiting and Resend for sending emails with a custom domain.



The UI is built using a mix of shadcn/ui, Magic UI and Tailwind CSS.



**Demo:** [https://nextjs-notion-waitlist.vercel.app](https://nextjs-notion-waitlist.vercel.app)



## Features



- **Next.js 14**: The latest stable version of Next.js.

- **Notion as a CMS**: Use Notion to manage your waitlist users.

- **Upstash Redis**: Use Upstash Redis to rate limit the number of signups in a given time period.

- **Resend**: Use Resend to send emails to users who sign up.

- **Vercel**: Deploy the app to Vercel with a single click.

- **shadcn/ui**: Use shadcn/ui for building the UI components.



## Why Notion?



Notion is used everywhere nowadays. It's a great tool for managing content and it's free to use. But a lot of people don't know that they can use Notion as a CMS for their websites which stands for Content Management System. This template is a very basic implementation of using Notion as a CMS for a waitlist.



However, You can extend it to use Notion for other types of content as well. Using Notion as a CMS is a great way to manage content without having to build a backend or a database. You can use Notion's API to fetch data from your Notion workspace and display it on your website.



## How to get started?



There are a few things you need to do before you can use this template:



### Notion



Assuming that you have a Notion account and a workspace, you can create a new database in your workspace and add the following columns:



- **Id**: A unique identifier for each record.

- **Name**: Title

- **Email**: Email

- **Timestamp**: Created Time



Now you need to get the secret key for your workspace. You can get it from the [Notion Integrations page](https://www.notion.so/my-integrations). You will need this key to fetch data from your workspace.



Now you need to get the ID of the database you created. You can get it from the URL of the database. It will look something like this:



`https://www.notion.so/{USERNAME}/{DATABASE_ID}?v={NUMBERS}&pvs={NUMBERS}`



You need to copy the `DATABASE_ID` from the URL.



### Upstash Redis



It's fairly simple to get started with Upstash Redis. You can sign up for a free account and create a new Redis database. You will get a `REST URL` and a `TOKEN` that you can use to interact with the Redis database.



### Resend



You need to sign up for a Resend account if not already. Then you need to add your domain and verify the DNS records. Once you have done that, you can generate an API key from the Resend dashboard which you will need to send emails.



## Building with this template



There are two ways to use this template:



1. **Deploy to Vercel**: Click the button below to deploy this template to Vercel with a single click.



[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flakshaybhushan%2Fnextjs-notion-waitlist-template&env=NOTION_SECRET,NOTION_DB,RESEND_API_KEY,UPSTASH_REDIS_REST_URL,UPSTASH_REDIS_REST_TOKEN)



The above button will create a new Vercel project and clone this repository into your GitHub account. You will need to provide the following environment variables:



- `NOTION_SECRET`: Your Notion secret key.

- `NOTION_DB`: The ID of the Notion database you want to use.

- `RESEND_API_KEY`: Your Resend API key.

- `UPSTASH_REDIS_REST_URL`: Your Upstash Redis REST URL.

- `UPSTASH_REDIS_REST_TOKEN`: Your Upstash Redis REST token.



2. **Manual Setup**: Fork this repository and clone it to your local machine.



Install the dependencies, this project uses `bun` as a package manager:



```bash

bun install

```



Run the development server:



```bash

bun dev

```



To run the email server:



```bash

bun email

```



Create a `.env.local` file in the root of the project and add the environment variables mentioned above. You can also have a look at the `.env.example` file for reference.



## License



You can use this template for personal or commercial projects. You can modify it as you like.



However, if you use this template for commercial projects, please consider buying me a coffee or sponsoring me on GitHub. It will help me to keep creating more templates like this.



Buy Me A Coffee



---



If you have any questions or need help with this template, feel free to reach out to me on [Twitter](https://x.com/blakssh) or leave a comment on this repository.