Fixing Apex Domain Issues for Next.js Sites Hosted on Vercel

If you're hosting Next.js sites on Vercel and using custom domains purchased from Namecheap, you might encounter a common issue where the apex domain (mysite.com) does not load while the www subdomain (www.mysite.com) works perfectly. This guide will walk you through the steps to resolve this issue by correctly setting up your DNS records.

The Issue

When visiting www.mysite.com, your site loads without any problems, but trying to access mysite.com results in the "site can’t be reached". This is usually due to incorrect DNS record configurations for the apex domain.

The Solution

To fix this, you need to update your DNS records in Namecheap to properly point the apex domain to your Vercel-hosted site.

Step-by-Step Guide

1. Access Namecheap DNS Settings

• Log in to your Namecheap account.
• Navigate to the "Domain List" section from the left sidebar.
• Find the domain you want to configure and click on the "Manage" button.

1. Update DNS Records

• Go to the "Advanced DNS" tab.
• Look for existing DNS records related to the domain. You might find an A record pointing to an IP address (e.g., @ -> 76.76.21.21).

1. Remove Incorrect A Record

• If you have an A record for the apex domain (@), remove it. This record typically points to an IP address that might not be suitable for Vercel's configuration.

1. Add CNAME Record for Apex Domain

• Click on "Add New Record".
• Select "CNAME Record" from the dropdown menu.
• Set the "Host" field to @.
• Set the "Value" field to your Vercel subdomain (e.g., your-site-name.vercel.app).
• Click the checkmark to save the record.

Example:

   Type: CNAME Record
   Host: @
   Value: your-site-name.vercel.app
   TTL: Automatic

1. Verify the Changes

• DNS changes can take some time to propagate. It might take anywhere from a few minutes to 48 hours for the changes to fully take effect.
• To verify, you can use online tools like DNS Checker to see if your apex domain is correctly pointing to Vercel.

1. Test Your Site

• After the DNS changes have propagated, visit both mysite.com and www.mysite.com to ensure both URLs load your site correctly.

Additional Tips

• Vercel Domain Configuration: Ensure that you have added both the www and apex versions of your domain in the Vercel dashboard under your project’s settings.
• Redirect Non-www to www (or vice versa): You might want to set up a redirect from the non-www version to the www version (or the other way around) to ensure consistent access. This can be done in Vercel's project settings or through additional DNS configurations.

Conclusion

By replacing the A record with a CNAME record pointing to your Vercel subdomain, you can resolve the issue of your apex domain not loading. This ensures that both mysite.com and www.mysite.com work seamlessly.