module 1 of 7 · 35 min

Next.js

Build server-rendered React products with clear server/client boundaries.

Explain Next.js clearlyImplement a small Next.js exampleEvaluate whether Next.js improves a simpler baselineIdentify failure cases and operational constraints
learning statenot started
0% completesign in to track progress
mental model

start with the idea before the implementation.

Next.js routes requests through server and client components and lets you decide where data and interactivity live.
core concepts

the mechanisms you need to reason about.

01

App Router

App Router is studied through intuition implementation evidence and trade-offs. The goal is to be able to explain the mechanism and verify it with a concrete test rather than only repeat a definition.

02

Server components

Server components is studied through intuition implementation evidence and trade-offs. The goal is to be able to explain the mechanism and verify it with a concrete test rather than only repeat a definition.

03

Client components

Client components is studied through intuition implementation evidence and trade-offs. The goal is to be able to explain the mechanism and verify it with a concrete test rather than only repeat a definition.

04

Route handlers

Route handlers is studied through intuition implementation evidence and trade-offs. The goal is to be able to explain the mechanism and verify it with a concrete test rather than only repeat a definition.

05

Caching

Caching is studied through intuition implementation evidence and trade-offs. The goal is to be able to explain the mechanism and verify it with a concrete test rather than only repeat a definition.

engineering lab

turn the lesson into evidence.

LAB 1

build a data page

Build the smallest version first. Record the input, expected output, measured result and one failure you discovered.

LAB 2

add a client interaction

Build the smallest version first. Record the input, expected output, measured result and one failure you discovered.

LAB 3

create an API route

Build the smallest version first. Record the input, expected output, measured result and one failure you discovered.

knowledge checks

prove you can explain and decide.

1

avoid leaking secrets

ask cortex to test me →
2

understand hydration

ask cortex to test me →
3

choose caching intentionally

ask cortex to test me →
failure modes

what usually goes wrong.

risk

unnecessary client components

Detect this early by defining a baseline, a measurable signal and a condition that would cause you to stop or redesign the approach.

risk

server/client boundary bugs

Detect this early by defining a baseline, a measurable signal and a condition that would cause you to stop or redesign the approach.

risk

accidental dynamic rendering

Detect this early by defining a baseline, a measurable signal and a condition that would cause you to stop or redesign the approach.

proof of learning

Create a short Next.js engineering note with one working artifact one metric one failure case and one decision about when you would or would not use it.

Save the result in your portfolio or project repository. A strong learning artifact should make your assumptions, metrics and failure analysis visible.