# Next.js Starter Template With Authentication + React 17 + TypeScript + Tailwind CSS 2 + ESLint 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. ### What all does this starter template has? - Next.js/React 17 - TypeScript - Tailwind CSS 2 - React Query - React Query Dev Tools - Prisma 2 - GitHub Auth - Email + Passwordless Auth - Postgres - ESLint - Prettier - Husky If this is the tech stack that you are interested in, then follow along. - [Github Repo](https://github.com/pbteja1998/nextjs-starter) - [Live Demo](https://next-starter.bhanuteja.dev) ### 1. Use Template ![Screenshot 2020-11-21 at 10.57.39 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605936676564/_4P5Oj3Dv.png) Go to [pbteja1998/nextjs-starter](https://github.com/pbteja1998/nextjs-starter) repo and click on `Use this template` button. --- ### 2. Create Repo ![Screenshot 2020-11-21 at 11.04.02 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605936868332/RxLZWQGem.png) Follow the instructions and create your repo --- ### 3. Deploy to Vercel #### 3.1. Import Project ![Screenshot 2020-11-21 at 11.06.58 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605937097391/9Lczi_Jp0.png) Login to [vercel](https://vercel.com) and click on `Import Project`. --- #### 3.2. Import Git Repo ![Screenshot 2020-11-21 at 11.09.32 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605937245104/x80XJkRGs.png) Let's import from Git Repository --- #### 3.3. ![Screenshot 2020-11-21 at 11.12.12 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605937391460/29tPukIQq.png) Enter the URL of the repo that you created earlier and `Continue`. --- #### 3.4. Create Vercel Project ![Screenshot 2020-11-21 at 11.14.49 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605937524068/jiJCAks3J.png) Choose the name of the project and `Deploy`. We will be adding the required environment variables later. --- #### 3.5. Successful Deployment ![Screenshot 2020-11-21 at 11.19.33 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605937865940/ACjD9b5Zw.png) You should see this once deployed. Open the dashboard after a successful deployment. --- #### 3.6. Dashboard ![Screenshot 2020-11-21 at 11.21.52 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605937993723/DTsKaDryF.png) That's it. Your Next.js starter application has been deployed to Vercel. You can click on `Visit` to open the website. --- #### 3.7. Web Application Demo ![Screenshot 2020-11-21 at 11.25.37 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605938157984/LypP5IspB.png) You should see something like this. This home page template is taken from one of the examples in [tailwindcss.com](https://tailwindcss.com) --- ### 4. Create a database 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. #### 4.1. Create a new Heroku app ![Screenshot 2020-11-21 at 11.34.16 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605938707438/tZ6AVYcRJ.png) ![Screenshot 2020-11-21 at 11.35.53 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605938825143/vEkLidE2-.png) --- #### 4.2. Go to Resources Tab and add `Heroku Postgres` addon ![Screenshot 2020-11-21 at 11.40.52 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605939118945/c56DV1RVA.png) --- #### 4.3. `Heroku Postgres` has a free tier available. I will be using that for the demonstration. ![Screenshot 2020-11-21 at 11.42.27 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605939266087/fR-CWaH2Q.png) --- #### 4.4. You now have a new Postgres DB created. Click on the addon to open the database dashboard ![Screenshot 2020-11-21 at 11.45.58 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605939387242/eG2XADex3.png) --- #### 4.5. View Credentials ![Screenshot 2020-11-21 at 11.48.16 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605939581690/PNnkecquC.png) Click on `Settings` and then `View Credentials`. --- #### 4.6. Copy Database URI ![Screenshot 2020-11-21 at 11.50.40 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605939762750/5GT1OhGNu.png) 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. --- ### 5. Setup Environment Variables #### 5.1. Open Env Vars dashboard in your newly created Vercel project ![Screenshot 2020-11-21 at 12.01.30 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605940349623/dg7bHlDqP.png) #### 5.2. Add DATABASE_URL ![Screenshot 2020-11-21 at 12.06.46 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605940625455/slKyASNuB.png) --- #### Create a new secret ![Screenshot 2020-11-21 at 12.05.18 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605940580529/vmxVupL7h.png) --- #### Save environment variable ![Screenshot 2020-11-21 at 12.08.06 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605940717998/z-1EW3JEj.png) --- ![Screenshot 2020-11-21 at 12.09.18 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605940767744/IkfA61e0t.png) --- #### Create `NEXTAUTH_URL` variable ![Screenshot 2020-11-21 at 12.13.20 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605941015388/FwqVAppLt.png) This is the URL of the deployment. --- Similarly, create all the variables that you can see in [.env.example](https://github.com/pbteja1998/nextjs-starter/blob/master/.env.example) file of the repo. - `SECRET` - Some random string - SMTP_HOST - SMTP host to send emails from. Example: `smtp.zoho.com` - SMTP_PORT - Your SMTP port. Example: `465` - SMTP_USER - Your SMTP user. Example: `bhanuteja@mycompany.org` - SMTP_PASSWORD - Your email/SMTP password. - SMTP_FROM - Email address from where you want your emails to come from. - GITHUB_ID - Your Github OAuth App ID - GITHUB_SECRET - Your Github OAuth App Secret You can follow the steps described [here](https://developer.github.com/apps/building-oauth-apps/creating-an-oauth-app/) to create a GitHub OAuth application. While creating that OAuth app, add `https:///api/auth` as `Authorization callback URL`. For example, in my case, I will add `https://nextjs-starter-kit-psi.vercel.app/api/auth` The rest of the fields, you can fill with anything. ![Screenshot 2020-11-21 at 12.22.28 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605941558383/XlkQ3GbRK.png) --- After adding all the environment variables, you need to redeploy the application for the changes to take effect. ![Screenshot 2020-11-21 at 12.26.01 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605941835866/FsveQ_Ups.png) --- Now, your new deployment will have GitHub authentication and passwordless login with email. --- I will also make a slim version of the starter kit in the future which will not require any database setup. If you have any suggestions or face any problems setting this up, [open a new issue in the repo](https://github.com/pbteja1998/nextjs-starter/issues/new). I will be more than happy to help you resolve those. If you like this starter kit, give a star to [pbteja1998/nextjs-starter](https://github.com/pbteja1998/nextjs-starter) repo. #### Until Next Time 👋 If you liked this article, check out - [3 Simple Steps To Setup Authentication in Next.js](https://blog.bhanuteja.dev/3-simple-steps-to-setup-authentication-in-nextjs) - [How to Import SVGs into your Next.js Project?](https://blog.bhanuteja.dev/how-to-import-svgs-into-your-nextjs-project) - [Add Typescript to your Next.js project](https://blog.bhanuteja.dev/add-typescript-to-your-nextjs-project) If you have any comments, please leave them below or you can also @ me on Twitter ([@pbteja1998](https://twitter.com/pbteja1998)), or feel free to follow me. #### Links and References: - [Passwordless Authentication with Next.js, Prisma, and next-auth](https://dev.to/prisma/passwordless-authentication-with-next-js-prisma-and-next-auth-5g8g) - [NextAuth.js](https://next-auth.js.org/) - [pbteja1998/nextjs-starter](https://github.com/pbteja1998/nextjs-starter) - [Nextjs Starter Demo](https://next-starter.bhanuteja.dev) - [Vercel](https://vercel.com) - [Heroku](http://heroku.com/) %%[newsletter]