How to configure DNS records for a Next.js Vercel app using AWS Route53

Patrick — Wed, 11 May 2022 22:49:16 +0000

Configuring the proper settings in AWS Route53 can sometimes be a bit time-consuming for something that really should be simple. We recently configured our AWS Route53 hosted zone to point to our Next.js app at Vercel. The process involves several not-so-intuitive steps, so we figured that writing a basic guide might help others in the community facing a similar challenge.

Vercel is amazing, but we ran into a snag when we saw the screen below. Remedying this situation takes a few extra steps laid out below. AWS does not allow apex records (root domain) to point to Vercel.

Our configuration instructions below walks you through how you can route all www and non-www traffic for both http/https to a Vercel app.

Steps:

Step 1: Add Vercel domain. Add your domain to Vercel (Project Settings => Domains)

Step 2: Create an S3 bucket. Next we need to create an S3 bucket in AWS that matches your domain. For example, we created avanawallet.com. It is important that it matches your domain name exactly.

After you create your bucket, go to Properties => Static website hosting and change the following settings:

Static website hosting = enabled
Hosting type = Redirect requests for an object
Host name = your website, for instance, we used www.avanawallet.com
Protocol = https

Once you've setup your bucket you will see a link for the bucket website. Take note and save this link - you will need it later.

Now if you follow that link, it will redirect you to the host name you entered. In theory you could point a CNAME record to this link and all would be good... except we need to also handle https requests. So let's go ahead and figure that out in Steps 3 and 4.

Step 3: Create SSL Certificate. Create your SSL/TLS certificate in AWS Certificate Manager. For the domain configuration, we suggest adding two settings similar to below. This setting will cover all subdomains (including www).

avanawallet.com
*.avanawallet.com

Step 4: Create Cloudfront Distribution. Next we need to create a Cloudfront distribution so we can add our certificate created in Step 3.

Create a distribution with the following settings:

Origin domain: Use the URL from Step 2. It's important that you use this URL, and not the pre-populated one from S3 that Cloudfront generates.
Viewer protocol policy: Redirect HTTP to HTTPS (or "HTTP and HTTPS" if you prefer)
Price class: We recommend "Use all edge locations (best performance)", but any option will work. Latency times increase with other options.
Alternate domain name (CNAME): add your domain name. For instance, we added avanawallet.com
Custom SSL certificate: Choose the certificate you created in Step 3

Great, now we should have a working Cloudfront distribution. Let's move on to the DNS records, the final step.

Step 5: Configure Route53.

Now we need to add two A Records. First, let's add the A Record for www. Create an "A Record" for www.avanawallet.com and point that to 76.76.21.21 (Vercel, confirm IP is still the same just to be safe before you point there).

Next, we need to create an A Record for the apex - point that to the Cloudfront distribution we created in Step 4. Choose "Alias => Cloudfront => [your region] => [distribution]"

Great, we should be all setup now. Test your setting. I recommend testing all four combinations to make sure they work:

All should route you to https://www.avanawallet.com.

Hope this brief guide helps!

DEV Community: Avana Wallet

How to configure DNS records for a Next.js Vercel app using AWS Route53