How to deploy a Nextjs app to vercel with a custom domain from google domains

Vercel provides easy deployment for Nextjs apps with the latest features and configurations. Google domain helps to purchase and manage domains with ease.

When you deploy an app to vercel, you get a default domain something like your-project-rho-five.vercel.app. If you already have a domain that you own, you can easily use it with your vercel app. For the scope of this blog Google Domains will be used for managing domains.

Head over to domains.google/veritasium to get 20% off your first year (Not Sponsored)

Now let's get started

Create a new Project in vercel

  • Navigate to your vercel account.
  • Click "Crete New Project"

Connect your Nextjs app's github repo

  • Add vercel to your Nextjs app's github project. Here I'm adding it to my portfolio website that was built with NextJs .
  • Click the "Only select repositories" field.
  • Type your project name
  • Click on the project that you want to deploy
  • Click Install

Import Nextjs app to vercel

  • Click on Import
  • Click "Build and Output Settings".(Optional) Here you can add your build commands. If you are deploying a static website you would have to run next export but thats a discussion for another day.
  • Click on Environment Variables to add env variables(Optional)
  • Click Deploy

Deployment successful

  • Your app is now deployed
  • Continue to Dashboard and Click Visit
  • You will be redirected to your website but it will be under Vercel's default domain

Configure Custom domain

  • Click on view Domain in your vercel project
  • Click mywebsite field
  • Type the domain that you own and want to add to your website.(We have our domains in google domains)
  • Click Add
  • Select the domain options that you want
  • Click Add

Configure domain in Google Domains

  • Navigate to Google domain Dashboard.
  • Find your domain listed on your google domains dashboard.
  • Click "Manage"
  • Click "DNS"
  • Navigate back to Vercel domains page
  • Copy the IP address of your A record. An A record maps a domain name to the IP address (Version 4) of the computer hosting the domain. An A record uses a domain name to find the IP address of a computer connected to the internet. You will need that to add to Google Domains
  • Navigate back to google domains DNS page
  • Select the type as A
  • Paste the IP address from vercel to the data field
  • Click on "Create new record"
  • add "www" in the host name field
  • Select Type as CNAME
  • Navigate to vercel domains page
  • Copy the CNAME value. A Canonical Name record (abbreviated as CNAME record) is a type of resource record in the Domain Name System (DNS) that maps one domain name (an alias) to another (the canonical name). Here we will be mapping our website to the domain provided by vercel.
  • Navigate to google domains DNS page
  • Paste the CNAME value under the data field for the CNAME record
  • Navigate back to the vercel domains page.
  • Now you should see a blue tick mark against your domain. That means it is verified and active.
  • This process can take upto 48hrs but on most cases it works immediately

Success!

  • Go to your custom domain now
  • Your website will be available at that url

Conclusion

And Voila! Your website is now deployed on vercel, under your own domain for the world to see. Deploying your website to production has become easier than ever and tools and platforms like vercel are making it easier day by day. This setup only takes around 10 to 15 minutes if you already have your Nextjs app ready in github and domain setup in google domains. Happy hacking!