Learn Next.js.
Connect server rendering, routing, caching, and client boundaries.
Next.js essentials
Start with the essentials or pick the concept you need.
01Next.js architectureExplore concepts
02Security & deploymentExplore concepts
What you will study in Next.js
Focused lessons organized by concept. Start with the explanation, trace the examples, and check your recall before moving on.
Next.js architecture
Next.js provides two routing systems: the Pages Router organizes page files, while the App Router uses nested route segments, layouts and React Server Components. They have different data-fetching and rendering conventions. Knowing which router a project uses prevents mixing APIs and assumptions from different architectures.
Security & deployment
Stale search results occur when requests finish in a different order from the user's inputs. A request for an older search can overwrite newer results unless the component checks which request is still relevant. Debouncing reduces request frequency but does not guarantee completion order.