Skip to main content

Deploy your frontend

You probably like to show your website to some friends. That's easy! We only need to deploy it. For deployment to our own domain, we're using Vercel, GitHub and NameCheap

Deploying to Vercel

Creating a Git repo

First you need to push your project to a GitHub repository. Just create one here if you haven't already, and follow the instructions there to get your repo on GitHub.

Creating a Vercel account

After your code is online on GitHub, you can create a Vercel account (sign up with GitHub). Vercel will request access to your GitHub repositories, you need to accept that.

Creating your project on vercel

It's very easy! Just hit "New Project" and select your repo. Because it's a Next.js project we've just made, you don't need to change any settings. Just continue and your project will be deployed. Once it's ready, click it to open it in the web.

Buying and configuring your own domain

It's pretty straight forward to buy a domain on NameCheap. Just search for a good one, follow the payment steps, and confirm your purchase.

After that's done, you need to add this domain to your project on Vercel. In the dashboard, Click your project -> Settings -> Domains and fill in the domain you want to add.

Vercel will now tell you which values need to be entered in your DNS settings. Usually this is a CNAME and an A record.

You can just copy these values and paste them into the DNS settings on NameCheap. Just head over to NameCheap and from your domain list, next to your domain, click "manage".

Here you can click the "Advanced DNS" and add the values given by Vercel. Make sure to set TTL to 1 minute for the fastest way.

Usually after this is done, your domain will be live within a minute!

Did you learn something?

Click the button below to tweet about what you thought of this section, what you've made, what you learned... Also don't forget to share it with us via slack! Cool tweets (or other social media posts) will be selected and presented on this page!

Tweet!