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
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.
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).
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.
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:
Host: @
Value: your-site-name.vercel.app
TTL: Automatic
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.
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.