Geolocation Lab
Read Vercel geo headers from the request, show a localized greeting, and demo Intl currency/date formatting.
Run this experiment yourself
Demos are not embedded on this site. Deploy a standalone copy on Vercel or run the experiment app locally.
Local development
cd apps/experiments/geolocation-lab pnpm install pnpm dev
Then open http://localhost:3010.
This is an experimental demo. Use it as a starting point for your own projects.
The Geolocation Lab reads request headers that Vercel injects at the edge (x-vercel-ip-country, city, timezone, and related fields), then builds a localized greeting plus Intl currency and date samples. Locally those headers are usually absent - the API returns honest fallbacks instead of inventing a city.
Features
- Read geo headers from a Route Handler
- Localized greeting by country code
- Intl currency and date formatting with timezone
- Documented header list in the UI
- Honest fallback when headers are missing
API Reference
GET /api/geo
Returns extracted headers, the documented header list, and a localized payload (greeting, currency sample, formatted date, source).
Implementation Details
extractGeoHeaders pulls known Vercel geo header names from a Headers object. buildLocalizedDemo maps country - currency/locale and formats with Intl. Source is "vercel-headers" only when country or city was present.
Use Cases
- Country-aware landing copy
- Currency defaults for pricing UI
- Teaching edge request metadata
Limitations
- Headers exist on Vercel edge deployments; localhost usually falls back.
- IP geolocation is approximate - not identity.
- City values may be URL-encoded by the platform.
Use in your project
Deploy or copy apps/experiments/geolocation-lab/ and adapt the Route Handlers and pure helpers in logic.ts. Keep honest fallbacks when optional services are missing.
Deployment
Local Development
cd apps/experiments/geolocation-lab
pnpm install
pnpm devConfiguration
| Variable | Required | Purpose |
|---|---|---|
| (none) | - | Works without extra secrets |
Vercel / Next.js Features Used
- Route Handlers
- Request headers
- Intl
Next Steps
- Explore related labs from the registry
relatedSlugs - Harden secrets, auth, and input limits before production
- Prefer platform primitives when you outgrow demo patterns