Deploying a Next.js project on Vercel in less than three minutes - with a custom domain

My personal website, wallis.dev, used to be hosted in a Docker container on a Digital Ocean droplet that cost me about £5 a month and a few hours each year of effort to maintain. Last week I deployed a website onto Vercel and was immediately impressed with the seamless deployment process - even with the knowledge that Vercel is the company behind Next.js. Since then, I've deployed my website onto Vercel and sunset my Digital Ocean droplet.

In this blog

1. How I used to host my website
2. Motivations behind moving to Vercel
3. Deploying a GitHub project to Vercel
4. Adding a custom domain to a Vercel project

Preface

I first developed wallis.dev just over 2 years ago using Next.js 7.0.2. At the time static exporting didn't exist and, as far as I can remember, Vercel's hosting (then Zeit) was in its infancy. As a result, I hosted it as a constantly running Docker container on a Digital Ocean droplet.

My site had been hosted on Digital Ocean droplet ever since. Not once did I run into issues aside from having to update versions of software I was using to host the site, such as Docker and Traefik. However, after researching Vercel and deploying another project on it, it was totally obvious that the droplet was overkill, an item of unnecessary expenditure and a waste of time maintaining it.

 Motivation behind moving to Vercel

1. Better CI/CD pipeline. Through Vercel's first-class integration with GitHub I was able to move from having to ssh onto my droplet, docker pull my updated image and restart it's Docker container to just committing the code to GitHub and allowing Vercel automagically build and publish it for me.
2. Preview URLs. Vercel automatically creates a preview URL for every pull request you make. Meaning I can send changes to other people for them to proofread and give feedback on changes without committing them to the main site itself.
3. No server maintenance required. Currently I have to ensure that software on my droplet, such as Docker, Docker Compose and a Traefik container (reverse proxy that makes the website accessible outside the droplet) is kept up-to-date. Moving to Vercel means I can delete the droplet and forget about the complicated Traefik setup.
4. Last but not least, to save money. While £5 a month isn't a huge amount it adds up (£60 a year). If I could host my site for free why wouldn't I!

Those are the 4 major reasons I decided to switch my deployment strategy. Now I'll take you through connecting Vercel and a GitHub repository and deploying your site for the first time.

Deploying my website onto Vercel for the first time

First, create an account with Vercel if don't already have one. Then navigate to https://vercel.com/new - the site that is used to create a new project with Vercel.

Once you've navigated to https://vercel.com/new you should see an Import Git Repository input that looks like the following:

You want to select the Import button next to the GitHub repository of your choice. If it isn't appearing use the search to locate your repository:

Next, you'll be asked to Select Vercel Scope. As this is my personal website I'll be using my Personal Account - If you like you can create a team but beware this costs money! I'd stick to your personal account unless you know what you're doing.

Then you'll see the Import Project screen. Here you can name your project within Vercel and select the Framework Preset. If you're using a Next.js project it should auto-fill both the Name and Framework by scanning your GitHub repository.

• If you're using a non-standard build command (i.e. not npm run build) or a non-standard build output directory you can enter those into the Build and Output Settings input area. This will advise Vercel on how to build your project and where to find it once it's built.
• To use custom environment variables with your project add them through the Environment Variables input area.

Aside from changing the Project Name, I left all values as default. This is how my Import Project screen looked:

Then just hit Deploy! Vercel will verify that your project builds before creating an initial deployment for your website, publishing it to a placeholder URL which will look something like personal-website.james-wallis.vercel.app.

When you clicked Deploy you should have seen the deployment screen appear alongside the, now greyed out, setup wizard:

When the deploy has succeeded you will be greeted by this screen:

Well done, you've deployed your website onto Vercel! From the Congratulations screen, you can both visit it in your browser and see it live and also open the Vercel Dashboard to see the live state of your project.

Adding a custom domain to your Vercel project

Prereqs: You already need to own the desired domain name and have access to its DNS records.

The second step to hosting wallis.dev through Vercel is to connect the wallis.dev domain name to my Vercel project.

Follow these instructions to do this:

Navigate to your Vercel Dashboard using the button in the last section. It'll look like this:

Then select Settings from the navigation and Domains in the side menu of Project Settings. The page should look like so:

This is the screen where you can add a custom domain to your Vercel project. Using the input box, enter your desired domain name. Then click Add. I'm using wallis.dev but you can use a subdomain such as www.youdomain.com or mywebsite.customdomain.com if you prefer.

Your domain will be added but it will display an "Invalid Configuration" error because you need to modify your domain's DNS settings to point at Vercel. Fortunately, Vercel tells you exactly what you need to do to point your domain at your website.

As I'm using wallis.dev I need to add an A record to my DNS settings. You can do this by navigating to your domain providers website and you should be able to find provider-specific instructions online.

If you're using a subdomain such as www.wallis.dev you'll need to add a CNAME record instead of an A record.

By the way an A record uses a domain name to find the IP address of a computer connected to the internet. The A in A record stands for Address. A CNAME record is a Canonical Name record and maps one domain, rather than an IP address, to another.

Once you've configured your DNS settings the Vercel dashboard should appear as the following:

Double congratulations! You've successfully launched your website onto Vercel and configured it to use your custom domain. Don't worry if you can't reach your project using your custom domain straight away, it might likely take some time for DNS changes to apply - make a coffee and check again later.

Final words

Hopefully, this article has convinced you to drop whatever complicated hosting solution you created years ago and join the easy life on Vercel!

I know for sure that my development cycle has been dramatically improved by the change, let me know in the comments if yours has too. Maybe you disagree with my motivations and prefer to be in total control? Let me know in any case!

Thanks for reading!

Read my Wallis Consultancy blogs?

If you've read my Wallis Consultancy blog you'd have seen that I launched that Next.js project on GitHub Pages. Well since writing them I've moved it to Vercel as well so that I can take advantage of the greater settings available such as having multiple domain names that redirect to one website.