Updated 07-01-2021 | 5 min read

How to use a custom domain registered with AWS Route 53 in a Next.js web app deployed to Vercel?

Vercel custom domain dashboard

TLDR

Update the AWS Route 53 domain’s nameservers or, A and CNAME record types with the values provided by Vercel under ProjectName / Settings / Domains after you added a domain to the project.

It will show the info needed to configure greatdomain.com and redirect to www.greatdomain.com or vice versa. After you tried to add the domain to your project unsuccessfully that information will also be sent to your email explaining what to do.

Vercel allows you to configure A (recommended) and CNAME records.

Some background

As of June 30 2021 AWS Amplify doesn't support all Next.js features. So if you are eager to use the great Image Component, Incremental Static Regeneration (ISR), Optional Catch All Routes or other Next.js 10+ features with AWS Amplify you have to wait and your best option is to deploy to Vercel.

But we know that time is a scarce commodity and we have to keep the features pipeline running for the sake of the business.

The website’s SEO and performance optimizations were due yesterday. Our research indicates that Next.js is a must for better Developer Experience and User Experience. The Image Component and the Automatic Image Optimization impact directly the user experience avoiding Cumulative Layout Shift and being lazy loaded by default so increasing the page’s speed.

Next.js does the heavy lifting for us mortal developers: image resizing, optimization and serving in modern formats from a variety of sources. Image optimization on demand that doesn't increase build times.

Sorry AWS but I need those features and can’t wait for you. You have great services yet your server-side rendering (SSR) capabilities and Next.js integration don’t match my use cases. But at least you got the domain registered, and if it keeps working as expected with the Vercel deployment I will not transfer it to Vercel.

Vercel side

Assuming that you have your project deployed to Vercel, you only have to add the custom domain. If you need to do advanced configuration you can check the documentation.

For now I will try to keep it simple based on my experience.

On the project’s setting on the Vercel dashboard, there is a Domain link where you can add your greatdomain.com. If you don’t have a domain you could also purchase it with Vercel, AWS Route 53 or your provider of choice.

After you click the Add button, the service will indicate any invalid configuration for the A Record or the Nameservers (in each tab) and it will recommend what to do.

Also it will send you emails with the values for the A and CNAME record types, and the nameservers needed to update your provider DNS records.

For greatdomain.com

To configure the Domain, set the following record on your DNS provider (recommended):

nametypevalue
@A76.76.21.21

Alternatively, you can also change your Domain's nameservers to the following intended set:

  • ns1.vercel-dns.com
  • ns2.vercel-dns.com

For www.greatdomain.com

To configure the Domain, set the following record on your DNS provider (recommended):

nametypevalue
wwwCNAMEcname.vercel-dns.com

Alternatively, you can also change your Domain's nameservers to the following intended set:

  • ns1.vercel-dns.com
  • ns2.vercel-dns.com

Follow by an email with the expected successfully configured after all the hard work!

If you are unfamiliar with the DNS terminology relevant to this task, here is the explanation from Vercel, you can check the full guide if there is no rush.

... you will be presented with different methods for configuring it, depending on whether it is an apex domain (example.com) or subdomain (docs.example.com).

Apex domains can be configured with an A record, while subdomains can be configured with a CNAME record. Both domain types can also be configured using the Nameservers method.

AWS Route 53 side

AWS Route 53 dashboard

Allways after updating the Nameservers or, the A and CNAME records you have to wait some time for the changes to be applied.

The waiting time is different for each provider. You should call customer support if it takes too long.

With AWS Route 53 it took me a few minutes to see my website live again.

Nameservers

The name servers associated with your AWS Route 53 registered domain should be found in your Route 53 / Domains / Registered Domains / greatdomain.com / Name Servers. They look like:

  • ns-123.awsdns-31.net
  • ns-4567.awsdns-63.co.uk
  • ns-432.awsdns-50.com
  • ns-7654.awsdns-50.org

Replace those awsdns name servers on the Route 53 / Domains / Registered Domains / greatdomain.com / Name Servers / Add or edit name servers with the Vercel’s Intended Nameservers that is recommended under the Nameservers tab. They should look like:

  • ns1.vercel-dns.com
  • ns2.vercel-dns.com

A Record

Copy the A Record value from your project dashboard in Vercel. It should look like 76.76.21.21.

Go to your AWS Route 53 / Hosted Zones / greatdomain.com / Create Record (It should be an A record by default, if not select an A type from the Record Type dropdown), and paste it in the field Value.

If you need further information for each field you can hit the Info link over the field or consult the Amazon Route 53 documentation. Leave the name empty and it should take a valid default.

Do the same for the CNAME type, copy your Vercel CNAME record value cname.vercel-dns.com and paste it in the Route 53 Record value field. The name field should be www in this case, or what Vercel recommends you.

Keep me in the loop!

Created by Yampier Medina

© 2020 MIT Licence