Blob store, by prompt
Vercel Blob enabled and wired in one conversation, with the upload token plumbed across all three envs.
Signed upload tokens
Server issues short-lived tokens; browser uploads directly to Blob. Content-type and size enforced server-side.
Client-side compression
A 20 MB phone photo compresses to ~1 MB in the browser before upload. Real-world UX, no extra cost.
Learning objectives
By the end of this session, you should be able to:- Provision a Vercel Blob store by prompt and have the AI wire it into an existing Next.js app end-to-end, including server-only upload tokens.
- Describe a file-upload UX in English — drag-and-drop, preview, size cap, content-type filter — and get a working implementation back.
- Verify a binary round-trip (pick a file → upload → persist URL in Neon → render from Vercel Blob CDN) as a first-class engineering skill.
Core topics
- What blob storage is, at the level a beginner needs: URLs that point to files, not to HTML.
- Why you never let the browser upload directly to your server (memory cost + attack surface) — and why signed upload tokens solve both.
- The one-week-ahead mental model: by Week 7 your guestbook entries will trigger Slack notifications. Keeping the schema clean today pays off then.
Tools introduced this week
| Tool | Role this week |
|---|---|
| Vercel Blob | File storage; CDN-backed URLs; free tier is generous |
@vercel/blob SDK | What your server action uses to issue upload tokens |
| Drizzle ORM | Adds a new image_url column to existing guestbook_messages |
| Cursor | Writes everything; you describe + verify |
Prerequisites: Complete Week 4 — Go Full-Stack: Neon + Auth first. You need the working guestbook from Week 4 to extend.
Download Week 5 PDF
Full lecture · 649 KB — Session plan, hands-on lab steps, EXIF and content-type troubleshooting.
Continue to Week 6
Add a blog system with RSS