Introduction
In this article, we’ll guide you through the process of hosting a Next.js website on Vercel with a custom domain. This method is straightforward and ideal for those looking to establish an online presence quickly. You’ll need a few accounts to get started: a Github account for version control, an account with Vercel for hosting, and an account with Porkbun to purchase your custom domain.
Note: Porkbun is a domain registrar where you can purchase custom domain names. Github is a platform for hosting code repositories. Vercel is a cloud platform for deploying websites and applications.
Buying a Custom Domain
The first step is acquiring a custom domain. Visit the Porkbun website and enter your desired domain name in the search bar to check its availability. Porkbun will present you with various domain extensions and pricing options.
Choose which extension you prefer by clicking the plus on the right after reviewing the pricing that fits what you’re looking for and checkout. The checkout screen will also give you the option of the number of years for which you want to pay for the domain initially. There is a way to also setup auto-renew if desired.
Once you complete checkout, in a few minutes should be able to navigate to domain management on your account at the top right of the website and view your available domains.
Creating a Project
If you don’t already have a Next.js project, we’ll guide you through setting one up. You can also host a server on Vercel, but for this example we will be working with a static next.js frontend starter site.
First ensure you have node.js installed on your machine. If you don’t, install node.js before continuing.
Initialize a next.js app with the following command in your CLI (command line interface) and choose all the default values in the prompt:
npx create-next-app@latest --js --eslintOnce that is completed, you can change directories into the app folder and verify that the site is running by executing:
npm run dev
Open your web browser and navigate to: http://localhost:3000 and you should be able to see the starter website here.
Upload the code to your Github repository either through the CLI or directly on the Github website, so that it can be later pulled into Vercel.
Importing the Site on Vercel
Sign up for a Vercel account if you haven’t already, and connect your Github account to Vercel so that it can read from your chosen repository. After you authorize Vercel to access your repositories, you’ll be able to import your Next.js project:
Click on import and make sure your framework preset is Next.js and then click Deploy:
If everything is good to go, you should see the following screen in a few minutes:
Congratulations! You have just deployed a website that can be accessed by anyone. Continute to the dashboard where you will have a few links to the website that is listed under “Domains”. Every link listed under domains will take you to your deployed website. Now we can link your custom domain to your deployed website.
Linking your Custom Domain to your Website
Navigate to the Domains page on your project dashboard with the Domains button at the top right.
Enter in your custom domain into the input box and click on add. Choose the option that best fits your needs. I generally would go with the recommended option.
Vercel will provide you with DNS records that need to be added to your domain configuration on Porkbun. Under your domain name on Porkbun you should be able to see a DNS option that you can click on. Select it once you have located it.
This is where you will take the record provided to you from Vercel and input it into here. This process typically involves creating A and CNAME records for both your domain (e.g., example.com) and the “www” subdomain (e.g., www.example.com).
yourdomain.com
- Choose an A record
- Leave the host blank
- Enter in the IP address given from Vercel as the answer and select Add
www.yourdomain.com
- Choose a CNAME record
- Add www in the host input
- Enter in the given CNAME value from Vercel as the answer and select Add
If you are having issues adding the CNAME record because Porkbun says it already exists, you need to delete the existing CNAME record first and then follow the step above.
It should take a few minutes for Vercel to verify and link the domain, and then you should be able to see your website at your custom domain.
Congratulations on successfully hosting your Next.js website on Vercel with a custom domain!
