Originally published at https://blog.bhanuteja.dev/nextjs-starter-with-authentication-react-17-typescript-tailwind-css-2-eslint
This blog post is outdated. The repo has changed so much since then.
Next.js has become my go-to framework for almost every project that I make. So, I made a starter template that I can just use and get started easily.
In this article, I will show you how to use the starter template that I made and deploy it with Vercel. I will also be connecting a Postgres database which I will create on Heroku.
- Next.js/React 17
- Tailwind CSS 2
- React Query
- React Query Dev Tools
- Prisma 2
- GitHub Auth
- Email + Passwordless Auth
If this is the tech stack that you are interested in, then follow along.
Go to pbteja1998/nextjs-starter repo and click on
Use this templatebutton.
Follow the instructions and create your repo
Login to vercel and click on
Let’s import from Git Repository
Choose the name of the project and
Deploy. We will be adding the required environment variables later.
You should see this once deployed. Open the dashboard after a successful deployment.
That’s it. Your Next.js starter application has been deployed to Vercel. You can click on
Visitto open the website.
You should see something like this. This home page template is taken from one of the examples in tailwindcss.com
We need a database to store users and user sessions. I will be using the Postgres database. But you can use whatever you want. If you already have a URL for your database, you can skip this step. I will be using Heroku to create a Postgres database.
Heroku Postgreshas a free tier available. I will be using that for the demonstration.
You should be able to see the database URI now. Copy that we will be using it later. Also, note that the free tier Heroku database credentials are not permanent. They change periodically. So, when you are deploying for production, use some other database that is stable or upgrade your Heroku database to a paid plan.
This is the URL of the deployment.
Similarly, create all the variables that you can see in .env.example file of the repo.
- Some random string
- SMTP host to send emails from. Example:
- Your SMTP port. Example: