I recently connected my new custom domain, pkdev.pro, to my Next.js developer portfolio hosted on Vercel.

At first, I thought this would be a simple process:

Buy domain → connect domain → done.

But while doing it, I ended up learning several practical concepts that every web developer should understand:

• What DNS actually does

• What an A record is

• What a CNAME record is

• What @ and www mean

• Why Namecheap creates default parking records

• Why conflicting DNS records can break a domain

• How Vercel verifies a custom domain

• How HTTPS fits into the process

So in this article, I'll walk through the exact process I followed to connect pkdev.pro from Namecheap to my Next.js portfolio on Vercel.

The final setup

Before getting into the steps, here's what my setup looks like:

User
  │
  ▼
pkdev.pro
  │
  ▼
Namecheap DNS
  │
  ├── A Record (@)
  │
  └── CNAME (www)
          │
          ▼
       Vercel
          │
          ▼
    Next.js Portfolio

My stack:

• Domain: pkdev.pro

• Domain registrar: Namecheap

• DNS: Namecheap

• Application: Next.js

• Hosting: Vercel

• HTTPS: Vercel

1. Choosing a domain name

I wanted a short domain for my developer portfolio.

I searched through different domain extensions and compared their prices before eventually choosing pkdev.pro.

During the search, I found several alternatives such as pkdev.tech, pkdev.site, pkdev.sbs, and others.

The important lesson here is:

Don't look only at the first-year price.

A domain might be cheap for the first year but have a much higher renewal price. Some promotional offers can also require a longer registration period.

For example, I encountered a .com/.in promotional offer where the ₹1 price was tied to a three-year term.

Eventually, I found pkdev.pro at a price I was comfortable with.

I purchased it through Namecheap.

2. My portfolio was already deployed on Vercel

My Next.js portfolio was already running on Vercel.

That meant I didn't need to move my website to another hosting provider.

I only needed to tell the DNS system:

"When someone visits pkdev.pro, send them to my Vercel application."

This is an important distinction:

Namecheap and Vercel are doing different jobs.

Namecheap

Namecheap is where I registered the domain and managed its DNS records.

Vercel

Vercel hosts and deploys my Next.js application.

So I didn't transfer the domain to Vercel.

I simply connected the two using DNS.

3. Add the domain to Vercel

Inside my Vercel project, I opened the Domains section.

Then I selected Add Existing and entered:

pkdev.pro

Vercel then showed me the DNS configuration required for my project.

For my setup, Vercel gave me:

Important: These are the values Vercel gave me for this setup. If you're following this tutorial, use the values Vercel currently shows for your own project rather than blindly copying values from a tutorial.

Vercel's current documentation explains the difference between A and CNAME records and how they are used for domain configuration. ([Vercel][2])

4. What is an A record?

Before changing anything in Namecheap, it's worth understanding what we're actually doing.

An A record, or Address record, connects a hostname to an IPv4 address.

In my case:

A Record

Host:  @
Value: 76.76.21.21

The @ represents the root domain.

So conceptually:

pkdev.pro
     ↓
A Record
     ↓
76.76.21.21

Namecheap's documentation also describes @ as the host used for the bare/root domain. ([Namecheap][1])

5. What is a CNAME record?

A CNAME, or Canonical Name record, creates an alias from one hostname to another hostname.

In my case:

CNAME

Host:  www
Value: cname.vercel-dns.com

So:

www.pkdev.pro
       ↓
CNAME
       ↓
cname.vercel-dns.com

This is different from an A record because the CNAME points to another hostname rather than directly to an IPv4 address.

Namecheap also recommends using CNAME records for hosts such as www, rather than putting a CNAME on the bare/root domain. ([Namecheap][3])

6. The interesting part: Namecheap's default DNS records

This is where I learned something I didn't expect.

After purchasing the domain, Namecheap had automatically created some default records.

I found:

CNAME Record

Host:  www
Value: parkingpage.namecheap.com

and:

URL Redirect Record

Host:  @
Value: http://www.pkdev.pro/

These are essentially parking/default records.

The www address was pointing toward Namecheap's parking page rather than my Vercel application.

And the root domain was redirecting to www.

Why was this a problem?

Because I needed:

@ → Vercel
www → Vercel

but Namecheap was currently configured as:

@ → redirect to www
www → Namecheap parking

Those records conflicted with the DNS configuration Vercel had provided.

Interestingly, Namecheap's own documentation explains that newly registered domains can have parking records configured by default and that these records should be removed when setting custom host records. It also warns about conflicting A, CNAME, and redirect records. ([Namecheap][4])

7. Remove the conflicting records

I removed the two default records:

Removed:

CNAME
www → parkingpage.namecheap.com

and:

URL Redirect
@ → http://www.pkdev.pro/

I didn't change my nameservers.

This is an important point.

You don't necessarily need to move your DNS management somewhere else just because you're hosting your website on Vercel.

In my case, Namecheap's DNS was perfectly capable of managing the required A and CNAME records.

Namecheap documents that host records can be managed from:

Domain List → Manage → Advanced DNS → Host Records when using its supported DNS systems. ([Namecheap][5])

8. Add Vercel's DNS records to Namecheap

After removing the conflicting records, I added the records Vercel provided.

Inside Namecheap:

Domain List → Manage → Advanced DNS → Host Records

I added:

A Record

Type:  A Record
Host:  @
Value: 76.76.21.21

CNAME Record

Type:  CNAME Record
Host:  www
Value: cname.vercel-dns.com

I left the TTL at the default/automatic value.

Namecheap notes that DNS changes can take time to propagate and recommends checking for conflicting records when configuring a domain. ([Namecheap][1])

9. Verify the domain in Vercel

After saving the DNS records, I returned to Vercel.

I clicked Refresh.

And then...

Success. 🎉

Both domains showed:

✓ Valid Configuration

The two entries were:

pkdev.pro
www.pkdev.pro

Vercel also showed a:

308

redirect from pkdev.pro to www.pkdev.pro.

A 308 is a permanent redirect response, so seeing that isn't necessarily a problem. It simply means Vercel is redirecting one URL variant to the other.

The important thing is that the intended canonical URL works.

10. Verify the website

Now it was time for the most satisfying part.

I opened:

https://pkdev.pro

And my portfolio loaded.

My Next.js portfolio was now accessible through my own custom domain.

11. Verify HTTPS

The final thing I wanted to confirm was HTTPS.

I opened the website using:

https://pkdev.pro

and verified the browser's connection information.

One thing I learned here is that you shouldn't rely only on the old padlock icon.

Modern Chrome versions can display connection information differently.

You can:

1. Open https://pkdev.pro

2. Click the connection/settings icon beside the address

3. Check the connection/security information

4. Confirm that the connection is secure

You can also press:

Ctrl + L

to focus the address bar and inspect the complete URL.

The final result:

https://pkdev.pro

loads my portfolio securely.

12. Common mistakes when connecting a domain to Vercel

Here are the mistakes I'd specifically watch out for.

1. Creating duplicate records

Don't create two different A records or CNAME records for the same host unless your hosting provider explicitly tells you to.

2. Leaving Namecheap's parking record

If you have:

www → parkingpage.namecheap.com

and then try to create:

www → cname.vercel-dns.com

you have a conflict.

Remove the conflicting record.

3. Using the wrong record type

Don't assume every domain connection requires a CNAME.

In my setup:

@    → A Record
www  → CNAME

The correct values should come from your hosting provider.

4. Copying DNS values from an old tutorial

DNS instructions can change.

Instead of copying values from a random blog post, go to your Vercel project and check the DNS configuration Vercel currently provides.

5. Changing nameservers unnecessarily

If your current DNS provider can manage the records you need, you may not need to change nameservers.

Changing nameservers is a bigger DNS change than simply adding the required host records.

6. Looking only at the first-year domain price

A domain might look extremely cheap for year one but become significantly more expensive at renewal.

Always check:

• First-year price

• Registration term

• Renewal price

• Taxes/fees

• Transfer rules

What I learned from this

The biggest lesson wasn't actually how to connect a domain.

It was understanding how the pieces of the web fit together.

Before doing this, I could deploy a Next.js application to Vercel.

But now I have a better mental model:

Domain
  ↓
DNS
  ↓
A / CNAME records
  ↓
Hosting platform
  ↓
Next.js application
  ↓
HTTPS
  ↓
User

Namecheap doesn't host my portfolio.

It manages my domain and DNS.

Vercel doesn't own my domain.

It hosts my application and handles the deployment/custom-domain side.

DNS is what connects the two.

And once I understood that, the whole process became much less confusing.

Final result

My portfolio is now live at:

https://pkdev.pro

The final setup is:

Namecheap
   │
   │ DNS
   ▼
pkdev.pro
   │
   ▼
Vercel
   │
   ▼
Next.js Portfolio
   │
   ▼
HTTPS

A small setup, but a useful piece of real-world web development knowledge.

Official references

For readers who want to go deeper:

• Namecheap — How to set up host records

• Namecheap — How to set up an A record

• Namecheap — Connect a domain to hosting

• Vercel — A Record vs CNAME