Start with the right fundamentals.
Build confidence in routing, layouts, rendering, and the daily workflow before you worry about advanced abstractions.
What you learn in Foundation
Routing fundamentals
Learn how pages, segments, and navigation fit together before abstractions hide the basics.
Layouts and composition
Understand shared structure so your project stops feeling like disconnected files.
Rendering boundaries
Get comfortable with Server and Client Components and when each decision matters.
Tailwind v4 workflow
Style confidently with tokens, utilities, and patterns that scale cleanly.
Component reading habit
Study real source to learn naming, props, and composition instead of memorising snippets.
A small real project
Finish with something practical so the fundamentals connect to actual implementation.
Beginner
Start here if Next.js still feels fuzzy
Start this trackRecommended first if you want strong mental models instead of rushed shortcuts.
A clear first path
- 1
Orient the project
Create a fresh app, understand the file structure, and map the runtime before you add features.
- 2
Build routes and layouts
Practice nesting, shared UI, and page composition until the App Router feels predictable.
- 3
Read and adapt components
Use the component library as study material so you can reuse patterns with understanding, not guesswork.
Ready for production patterns?
Once the fundamentals feel stable, move into the Production Track and learn what makes codebases maintainable.
Built for deliberate practice