Deploying Application with Custom Domain through Vercel

In this article, we will be looking at how we can deploy a Next.js application through Vercel. This method will be the same for any framework that you might want to use for your project.

We will be focusing on the deployment of a Next.js application rather than development. Vercel is the best platform to host a Next.js application as Vercel leads the open-source development of Next.js.

Configuring Project in Vercel

Let's start by logging in or creating an account on Vercel. On the landing page, click on the "New Project" button to create a new project on Vercel. Then you will be greeted with a page to Import GitHub Repository or Clone Template with various framework options. Since we have already created a Next.js application we can go with the first option. Provide necessary privileges to Vercel to access your GitHub repositories. Choose the project you want to deploy from the list of repositories.

A Configure Project page will be shown next. Here we can provide a project name of our choice, the framework preset of our project which should be auto-populated by Vercel, and also specify the root directory of our project. Then there is a build settings section to provide any build commands this can be left as default for now. The last section is for the environment variables where we can provide API keys or tokens required for the application. After entering these we can click the deploy button to start the deployment process.

The deployment process will be over within a couple of minutes and you will be taken to the project overview page. Now your project is live on the internet. It will be on a domain with ".vercel.app" at the end.

Purchasing a Custom Domain

Now let's look at how we can add a custom domain of our choice for our application. For this click on the settings tab and then the domains section to add domains. We should first buy a domain if we don't already have it. We have various options like GoDaddy, Namecheap, and several others. There is also Freenom that provides free custom domains but please do not use it as it is highly unreliable. For my domains, I chose to go with Porkbun let me say why.

At Porkbun we can get any non-aftermarket .com domains at just $4.75 for the first year, which renews at $9.13 / year. Which is the best offer among all the domain registrars out there. In addition to lower prices, Porkbun also provides various features free for which other providers charge us. We can take a look at these features soon. Porkbun is also quite reliable from all the reviews on the internet. So, if you want to go for Porkbun, create an account there and try searching the domain you wish to buy on the Porkbun landing page. You can see all the TLD extensions available for the name you searched. Choose a domain of your choice from the list and add it to the cart.

Now is the time to check out all the free features offered by Porkbun. WHOIS Privacy is a Domain Privacy Protection that hides our personal info from the public WHOIS database by replacing our personal information with the information of forwarding service, it is done by a proxy server. GoDaddy charges extra for Domain privacy. The next main feature is the SSL Certificate which is required to keep user data secure, verify ownership of the website, prevent attackers from creating a fake version of the site, and gain user trust. Namecheap charges extra for SSL Certificate. Along with these essential features, Porkbun also provides free Email forwarding and URL forwarding. We also get their Site Builder, Web Hosting, and Email Hosting Trial. Which we don't really want in this case.

Adding Domains on Vercel

Once you have purchased the domain of your choice let's go back to Vercel and connect our domain with the application. For that, go to the project settings tab of the application and click on the domains section. Here you need to enter the domain and click on add. You will be asked whether to add a www redirect for your application. You can choose the recommended option here.

After you have added the domain it will be connected to our application and it will be listed but will be saying "Invalid Configuration". To fix this, we need to set up an A record on our DNS provider to convey that we have hosted our application on the Vercel platform.

Configuring A Record for the Domains

Copy the A record value and go to Porkbun. Click on Account on the top right and then Domain Management. Domain Management will list all the domains that you own. Click on the details of the domain that you want to configure for the Vercel application.

Here click on the Edit button adjacent to DNS RECORDS. You will be shown a Manage DNS Records page. Choose "A - Address Record" for the Type, leave Host as blank as this is the space where we can specify our subdomains. For this A record we don't want to specify subdomain. Paste the value you copied from Vercel A record in the text field labeled as Answer and press Add.

Configuring CNAME Record for the Subdomains

Just like this, we can provide the DNS Records for subdomains as well. Go back to Vercel and copy the value of CNAME Record for the subdomain in this case it is www.

Return to the Manage DNS Records on Porkbun and this time choose CNAME - Canonical name record as the type, provide www as the Host and paste the value you copied from Vercel in Answer and press Add.

You should do this if you have a www subdomain. Similarly, if you want to add more subdomains you can specify them in Vercel and press add to create more subdomains.

Configuring Nameservers

Next, go back to Vercel and press on the Nameservers tab next to A Record. Copy the value in the Intended Nameservers. Move back to Porkbun and click on the Edit button next to the "AUTHORITATIVE NAMESERVERS" and paste the copied values on the page that appears and press Submit.

With that, the configuration has been completed for our domain. If we go back to Vercel and give it some time both of our domains will show Valid Configuration under them.

Now we have deployed our application on the custom domain we specified through Vercel.