Setting up a Domain and Subdomain on Vercel: A Step-by-Step Guide

Introduction:
If you have purchased a domain from Namecheap and want to use them with Vercel, this step-by-step guide will walk you through the process. By connecting your domain to vercel and creating subdomain there, you can easily host your website or application on Vercel's powerful platform. Let's get started!

Step 1: Sign in to Namecheap.
Go to the Namecheap website and sign into your account using your credentials. Once logged in, you'll be able to manage your domain and subdomain settings.

Step 2: Access Domain Management.
In the Namecheap dashboard, locate the domain you want to connect to Vercel and click on the "Manage" button next to it. This will take you to the domain management page.

Step 3: Update DNS Settings.
On the domain management page, navigate to the "Nameserver. Select the "Custom DNS" option. Here, you need to add or modify the DNS records to point your domain and subdomain to Vercel's servers.

Now we will go to vercel and collect our custom DNS for our project.

For main domain
Step 1: Open a new tab or window and visit the Vercel website. Sign in to your Vercel account using your credentials.
Once logged in, click on the "Import Project" or "Add" button to add your website or application to Vercel.
After adding your project, you'll be redirected to the project dashboard. Here, click on the "Settings" or "Project Settings" option to access the configuration settings.

Under the "Domains" or "Custom Domains" section, click on the "Add" button. Enter your main domain and click "Add Domain."

Step 2: After attempting to add the domain to Vercel, you may encounter an "Invalid Configuration" message. To resolve this issue, you need to edit the nameservers for your domain. By modifying the nameservers, you can ensure a proper configuration and enable seamless integration between your domain from Namecheap and Vercel's hosting platform.

Step 3: Choose the nameservers provided by Vercel and copy them to a text editor or notepad for later use. These nameservers will need to be added to the Namecheap domain settings in order to establish the connection between your domain and Vercel's hosting platform.

Step 4: Next, navigate to the "Custom DNS" section within the Namecheap domain management page. Here, you will find an option to add custom nameservers. Paste the nameservers obtained from Vercel into the designated fields. This step allows you to configure the DNS settings of your domain to point to Vercel's servers. Once you have added the nameservers, save the changes. This ensures that the domain is correctly linked to Vercel, establishing a seamless connection between Namecheap and Vercel for hosting your website or application.

Step 5: Once you have successfully added the nameservers provided by Vercel to the custom DNS settings in Namecheap, your domain should be functional and ready to use.

Moving on to the subdomain aspect

Step 1: Navigate to the main domain where you wish to add a subdomain. Click on the 'Edit' option and then select 'View DNS Records & More' for the respective 'Domain Name.'

Step 2: To add a subdomain, create a new DNS record and choose the appropriate record type, which is typically "CNAME." Enter your desired subdomain as the "Host" or "Name" for this record. In the "Value" or "Points To" field, specify Vercel's subdomain, which is commonly "cname.vercel-dns.com" (without quotation marks).

After making these changes, save the updated DNS records to ensure the proper configuration of your subdomain.

Step 3: In a new tab or window, open the Vercel website and log in to your Vercel account using your login credentials. After successfully logging in, locate the "Import Project" or "Add" button and click on it to include your website or application in Vercel.

Once you have added your project, you will be redirected to the project dashboard. From there, navigate to the "Settings" or "Project Settings" option to access the configuration settings.

In the configuration settings, find the "Domains" or "Custom Domains" section and click on the "Add" button. To add the subdomain, click on the "Add" button once again and enter your desired subdomain. Vercel will automatically verify the domain if the DNS records were set up correctly. After successfully adding the subdomain, Vercel will proceed with the verification process for the subdomain as well.

Step 7: Verify and Deploy
Vercel will verify your domain and subdomain settings. Once verification is complete, you can deploy your project to the domain and subdomain you added. Vercel will handle the deployment process and make your website or application accessible through your custom domain and subdomain.

Conclusion:
By following these step-by-step instructions, you can seamlessly connect your domain and subdomain from Namecheap to Vercel, enabling you to take advantage of Vercel's robust hosting capabilities. However, it's important to note that when adding a subdomain to a project, both the main domain and the subdomain should be under the same Vercel account. If you have added the main domain to a project using your personal account and want to add a subdomain to a team project, you'll need to use a different approach.

Thank you for reading this guide, and happy coding!