Next.js routing, layouts, server and client
By the end of today you can say which code runs on the server and which in the browser, explain what that means for secrets and for data fetching, and read a Next.js project without guessing.
YesterdayOn Day 32 you learned that UI is a function of state, all in the browser. Today part of that work moves back to the server.
TomorrowTomorrow you trace one request through every layer you have learned in this phase.
Why this matters
The server and client boundary is where secrets leak and where performance is won or lost. It is also the same boundary you will defend on Day 37 and Day 40.
- File-based routing
- Server and client boundary
- Server-side data fetching
- Layouts
Learn it
80 minCopy this into Claude or ChatGPT. It quizzes you before it explains anything, which is deliberate. The resources under it are how you check what it told you.
Today's Master Prompt
Free · sign inA prompt written for this day alone: your level, the exact scope, what to leave out, and an instruction to quiz you before it explains anything. Paste it into Claude or ChatGPT and it teaches you today's material.
Check it against something that is not a model
An assistant can be fluent and wrong, and on a topic you met today you will not catch it. These cover the same ground and were made by people who do this for a living, so they are what you hold the explanation up against. They are other people's work and we only link to them, so judge them for yourself.
3 hand-picked resources
Free · sign inVideos, official docs and articles covering the same ground, each opened and annotated by hand. They are what you check the assistant against on a day you cannot yet catch it being wrong.
Build it
50 minCreate a small Next.js app with two routes and a shared layout. Fetch data in a server component and display it. Then add one interactive element that requires state, and notice exactly where you were forced to add the client directive. Finally, put a fake secret in a client component, build, and find it in the browser output.
Recall it
20 minAnswer out loud, reveal, then mark honestly whether you had it. That score is the only thing on this page you do not get to choose.
5 recall questions
Free · sign inQuestions you answer from memory, then grade yourself against the real answer. The score is carried into the mastery rating below it, so an honest miss cannot quietly become a tick.
Rate it
Completion and mastery are tracked separately. Be honest, because an inflated rating only means the concept resurfaces sooner.
Mastery tracking
Free · sign inRate yourself against five named criteria per concept. Completion and mastery are tracked separately, and anything you rate shakily comes back automatically on a spaced schedule.
Recap
- 01The directory structure is the URL structure
- 02Server components can hold secrets and read data; client components cannot
- 03Anything in a client component ships to the browser and is readable
- 04The boundary covers a subtree, so push it as far down as you can
Your progress
Free · sign inMark days complete, pick up where you left off across devices, and watch completion and mastery diverge. Free, and the account exists only so ninety days of work cannot vanish with a cleared browser.