IntermediateNext.js 16ConvexReact 19

Building Real Apps with Next.js 16 & Convex

A hands-on track through the modern full-stack pattern: render with React Server Components, store and sync data reactively with Convex, and add real authentication with Clerk. Every lesson ships with runnable, in-browser code.

7 lessons · ~2 hours

1. Foundations

Server Components vs. client islands
Why most of your UI should render on the server — and how to spot the parts that shouldn't.
The Next.js 16 caching model
Caching is now opt-in. Learn use cache, cacheLife, and when to keep data dynamic.

2. Data with Convex

Schema design & indexes
Convex has no query planner — you index every access pattern by hand. Here's how to do it well.
Reactive queries
In Convex, a query is a live subscription. Change the data and every screen updates — no polling, no websockets.
Mutations & transactions
Writes in Convex are transactional functions. Learn the read-modify-write pattern behind "mark complete".

3. Auth & Access

Wiring Clerk to Convex
How a Clerk-issued JWT reaches your Convex functions — and why that's the whole game for secure data.
Gating content the right way
UI gating is a convenience, not a wall. Learn where access checks must actually live.