Track
Next.js
Review App Router structure, server boundaries, data fetching, and route APIs.
- 01
App Router file conventions
Use App Router folders and special files so routes match Next.js conventions.
routingapp-routerfiles - 02
Layout and page boundaries
Keep shared chrome in layouts and route-specific data in pages.
layoutspagesrouting - 03
Server vs Client Components
Use Server Components for data and secrets, and Client Components for interactivity.
server-componentsclient-componentsboundaries - 04
Small client component islands
Place client-only behavior in the smallest component that needs it.
client-componentsbundle-sizeinteractivity - 05
Server-side data fetching
Fetch route data on the server when the page needs it before rendering.
data-fetchingserver-componentsnot-found - 06
Parallel data fetching
Start independent data requests before awaiting them to avoid waterfalls.
data-fetchingperformanceasync - 07
Loading and error boundaries
Give dynamic routes immediate loading UI and route-level recovery.
loadingerrorsstreaming - 08
Caching and revalidation intent
Make caching choices explicit so freshness and performance match the product need.
cachingrevalidationperformance - 09
Metadata per route
Use the Metadata API in Server Components instead of mutating the document head manually.
metadataseorouting - 10
Route handlers as API boundaries
Use route handlers for HTTP APIs and keep them separate from page UI.
route-handlersapiboundaries