Next.jsReactIntermediate~4h

Next.js

The mechanism, not the release notes

This framework changes faster than anything else you will be asked to know, and almost none of what changes is the part that matters. Underneath the renaming there is one tree, one boundary, four stores and one build — and a page that came back wrong is always one of them. Learn those, and a release is a paragraph.

Start this project See the modules

Modules: 5
Drills: 12
Build steps: 3
Time: ~4h

Walk out able to

Read a route you have never seen and say where each part runs, what crosses the wire, and which store answered — then name the fix.

What you drill

A URL to one file

Segments, invisible folders, and what a click rebuilds.

Both sides of the boundary

What ships, what may cross, and what a submit sends.

Four stores, one symptom

Which copy answered, and which act actually clears it.

What the build emitted

What it could finish, and what it baked in on the way.

The pitch

What you practise, and what you leave with

A route tree of your own with three rendering outcomes in it, built and read — plus the reflex the other twenty-two items are for.

You will practise

Resolving a URL to one file and its chain
What ships, what crosses, what a submit sends
Naming the store a stale page came from
What a build could finish, and what it froze

Afterwards you can

Say which file answers a URL, and why
Count what one directive ships to the browser
Diagnose a stale page to one of four stores
Name the line that made a route wait

Modules

5 modules, 23 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

1
Resolve the URL
~53 min
Name the file that answers a URL, the chain that wraps it, and what a click rebuilds.
- LessonWhy the folders are the router5 min
- LessonResolve a URL to one leaf10 min
- DrillMatch a URL to its file10 min
- LessonSay what a click rebuilds10 min
- DrillKeep it, or build it again9 min
- DrillSpell the route files9 min
2
Where the boundary falls
~43 min
Decide what runs in the browser, what it drags with it, and what may cross as a prop.
- LessonDraw the client boundary14 min
- DrillDecide server or client9 min
- DrillCount what ships to the browser11 min
- DrillSend a prop across the boundary9 min
3
Where the data crosses
~45 min
Work out what a nesting choice cost, and what really travels when a form submits.
- LessonMove the fetch, change the wait14 min
- DrillTime the render waterfall11 min
- LessonFollow a submit across the wire11 min
- DrillSay what crosses on a submit9 min
4
Which store answered
~35 min
Name the four stores by key, life and owner — then diagnose a stale page to one of them.
- LessonName the store that answered14 min
- DrillDiagnose the stale page10 min
- DrillCount the rebuilds11 min
5
What the build emitted
~56 min
Say what could be finished before anybody asked, and what was baked in on the way.
- LessonRead what the build decided12 min
- DrillProduced ahead, or per request9 min
- DrillKeep the value off the client9 min
- Build stepScaffold it and group two routes10 min
- Build stepAdd the three that vary8 min
- Build stepBuild it and read the output8 min