Back to articles
How Dynamic QR Codes Work: Redirect Routes, Scan Tracking, and Analytics in Next.js

How Dynamic QR Codes Work: Redirect Routes, Scan Tracking, and Analytics in Next.js

via Dev.to TutorialShaishav Patel

Static QR codes embed data directly — scan one and you get a URL, a WiFi password, or a phone number baked into the image. But you can't change them after printing. Dynamic QR codes solve this by encoding a short redirect URL instead of the final destination. The server handles the redirect, tracks who scanned it, and lets you change where it points — without reprinting the code. I built this into ultimatetools.io/tools/misc-tools/qr-code-generator/ . Here's how the redirect, tracking, and analytics pipeline works. The architecture in one diagram User scans QR code ↓ QR contains: ultimatetools.io/q/abc123 ↓ GET /q/abc123 (Next.js route) ↓ ┌─────────────────────────────┐ │ 1. Fetch QR record from DB │ │ 2. Check: paused? expired? │ │ scan limit reached? │ │ 3. Parse IP + User-Agent │ │ 4. Geo-lookup (ip-api.com) │ │ 5. Record scan in DB │ │ 6. 307 redirect → dest URL │ └─────────────────────────────┘ ↓ User lands on final destination The QR code itself never changes. Only the server-sid

Continue reading on Dev.to Tutorial

Opens in a new tab

Read Full Article
3 views

Related Articles