Track
nextjs
Next.js
36 lessons: App Router, server/client components, data fetching—React 18 + TSX playground (client components) and 108 MCQs.
- Mode
- client_nextjs
- Practice
- client nextjs
- Lessons
- 36 units
Before you start
A React meta-framework for file-based routing, React Server Components, data fetching, and production deployment.
Teams ship SEO-friendly, full-stack React apps with less boilerplate than wiring router + SSR yourself.
Marketing sites, dashboards, e-commerce, and Vercel-style deployments that need hybrid static + dynamic pages.
36 lessons with TSX playground (client components via React 18 CDN), conceptual server-component lessons, and 108 MCQs.
After the React and TypeScript tracks—when you are ready to own routing, data boundaries, and deployment—not isolated widgets.
Lesson order
Sequential — follow top to bottom36 lessons are live in this track. Start from step 01 for the smoothest path.
-
01 intro Introduction to Next.js
beginner
Open → -
02 what-is-nextjs What is Next.js?
beginner
Open → -
03 nextjs-vs-react Next.js vs React alone
beginner
Open → -
04 app-router-overview App Router overview
beginner
Open → -
05 playground-workflow Playground workflow
beginner
Open → -
06 file-conventions File conventions
beginner
Open → -
07 layouts-nesting Layouts and nesting
intermediate
Open → -
08 dynamic-routes Dynamic routes
intermediate
Open → -
09 route-groups-middleware Route groups and middleware
advanced
Open → -
10 navigation-links Navigation and Link
beginner
Open → -
11 parallel-intercepting-intro Parallel and intercepting routes (intro)
advanced
Open → -
12 server-components React Server Components
intermediate
Open → -
13 client-components Client Components
beginner
Open → -
14 use-client-directive The 'use client' directive
beginner
Open → -
15 composition-patterns Server/client composition
intermediate
Open → -
16 metadata-seo Metadata and SEO
intermediate
Open → -
17 fonts-images-next Fonts and next/image
intermediate
Open → -
18 fetch-server Server-side data fetching
intermediate
Open → -
19 cache-revalidate Caching and revalidation
advanced
Open → -
20 loading-ui Loading UI
intermediate
Open → -
21 error-ui Error UI
intermediate
Open → -
22 client-data-patterns Client-side data patterns
advanced
Open → -
23 route-handlers Route Handlers
advanced
Open → -
24 server-actions Server Actions
advanced
Open → -
25 forms-mutations Forms and mutations
intermediate
Open → -
26 cookies-headers Cookies and headers
advanced
Open → -
27 env-config Environment configuration
advanced
Open → -
28 deployment Deployment
advanced
Open → -
29 css-modules-tailwind CSS Modules and Tailwind
intermediate
Open → -
30 images-optimization Image optimization
intermediate
Open → -
31 performance-mindset Performance mindset
advanced
Open → -
32 streaming-suspense Streaming and Suspense
advanced
Open → -
33 pages-router-legacy Pages Router (legacy)
advanced
Open → -
34 interview-essentials Next.js interview essentials
advanced
Open → -
35 production-checklist Production checklist
advanced
Open → -
36 summary Track summary and next steps
beginner
Open →