Computers talk using IP addresses like 76.76.21.21.
Humans remember names like google.com better.
DNS (Domain Name System) is the phonebook of the internet — it translates names → IPs.
You type in browser: https://example.com
│
▼
┌─────────────────┐
│ Your ISP's │
│ DNS Resolver │
│ (e.g. 8.8.8.8)│
└────────┬────────┘
│ "Where is example.com?"
▼
┌──────────────────────────────┐
│ DNS Lookup chain: │
│ │
│ 1. Root DNS servers │
│ → tell us where ".com" is │
│ │
│ 2. .com TLD servers │
│ → tell us where │
│ "example.com" nameserver │
│ is │
│ │
│ 3. Authoritative nameserver │
│ (e.g. Namecheap, │
│ Cloudflare, AWS) │
│ → returns the A or CNAME │
│ record for example.com │
└────────────┬─────────────────┘
│
▼
┌─────────────────────────┐
│ "example.com is at │
│ 216.198.79.1" │
└──────────┬──────────────┘
│
▼
┌─────────────────────────┐
│ Browser connects to │
│ 216.198.79.1 │
│ (Vercel's server) │
│ │
│ Server responds with │
│ your website HTML │
└─────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ DOMAIN │
│ The name you type: example.com │
│ You BUY this from a registrar (Namecheap, etc.) │
│ Cost: ~$10-15/year │
└─────────────────────┬───────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ DNS RECORDS │
│ The instructions for where to send traffic │
│ You MANAGE these at your DNS provider │
│ │
│ Common types: │
│ │
│ A → ipv4 address (e.g. 1.2.3.4) │
│ AAAA → ipv6 address │
│ CNAME → alias to another domain (e.g. www) │
│ MX → where email goes │
│ TXT → text info (SPF, verification) │
│ NS → which server is the authority │
└─────────────────────┬───────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ HOSTING │
│ Where your website files actually live │
│ Examples: Vercel, Netlify, AWS, shared hosting │
│ │
│ Hosting provider gives you an IP or CNAME target │
│ You point your DNS records to that target │
└─────────────────────────────────────────────────────┘
apex (naked domain) www subdomain
┌──────────────┐ ┌──────────────────┐
│ example.com │ │ www.example.com │
└──────┬───────┘ └───────┬──────────┘
│ │
▼ ▼
A Record points to IP CNAME points to domain
┌─────────────────┐ ┌──────────────────────┐
│ 216.198.79.1 │ │ myapp.vercel.app │
└─────────────────┘ └──────────────────────┘
│
▼
A Record points to IP
┌──────────────────┐
│ 76.76.21.21 │
└──────────────────┘
Why both? Many people type just example.com (apex).
Vercel commonly sets up: example.com → A record → Vercel IP → 308 redirect → www.example.com
| Role | What they do | Example |
|---|---|---|
| Registrar | Sells you the domain name, handles renewal | Namecheap, GoDaddy, Google Domains |
| DNS Provider | Hosts your DNS records (the phonebook) | Namecheap, Cloudflare, Vercel DNS |
These CAN be the same company (e.g. Namecheap does both).
They CAN be different (buy at Namecheap, manage DNS at Cloudflare).
You BUY the domain from Registrar (once/year)
You HOST the files at Hosting provider (monthly fee)
You MAP them together via DNS records (free to set)
┌──────────┐ ┌──────────┐ ┌──────────┐
│Registrar │ │DNS │ │Hosting │
│(Namecheap│────▶│Records │────▶│(Vercel) │
│ .com) │ │A/CNAME │ │Your Site │
└──────────┘ └──────────┘ └──────────┘
When someone visits your domain:
- Registrar says "ask Namecheap's DNS servers"
- DNS servers say "it's at 216.198.79.1"
- Browser goes to that IP → Vercel serves your site
DNS changes are not instant. They spread like a rumor:
You update record ──▶ Your DNS provider ──▶ Cache expires ──▶ World sees it
│ │ │
▼ ▼ ▼
Instant ~1 min minutes → 48h
Each ISP and computer caches DNS results. That's why you might see the new site immediately while your friend still sees the old one.
| Term | Meaning |
|---|---|
| A record | Maps a name to an IPv4 address |
| CNAME | Maps a name to another name (alias) |
| MX record | Where email for @yourdomain goes |
| TTL | How long to cache a DNS result (seconds) |
| Nameserver | The server that holds your DNS records |
| Propagation | Time for DNS changes to spread globally |
| SSL/TLS | Encryption certificate (Vercel auto-provides this) |
| 308 redirect | Permanent redirect (apex → www) |