How this Next.js track works
- Client Components in the playground — React 18 and ReactDOM load from CDN; your TSX compiles in the browser when you click Run in browser. The runner strips
'use client'so the same TSX works here—real projects keep that directive at the top of client files. - Server concepts in prose — routing, Server Components, caching, and deployment are taught with file-tree examples and
printOutput(...)simulations because SSR runs on Node, not in this iframe. - Prerequisites — finish React (components, hooks, JSX) and TypeScript (types, interfaces) before this track.
Use printOutput(...) for terminal values and mountApp(<App />) when a lesson shows interactive Client Component UI.
Install on your device (macOS, Linux, Windows)
Lessons run in your browser on this site—install a modern browser and optional editor for local projects.
macOS
- Use Safari (preinstalled) or install Google Chrome / Firefox.
- Optional editor: VS Code (
brew install --cask visual-studio-code). - Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).
Linux
- Install Chromium or Firefox:
sudo apt update && sudo apt install -y chromium-browser firefox(Debian/Ubuntu; package names vary by distro). - Fedora:
sudo dnf install -y chromium firefox. - Optional editor: VS Code from code.visualstudio.com or
sudo snap install code --classic.
Windows
- Install Microsoft Edge or Chrome.
- Optional editor: VS Code (
winget install Microsoft.VisualStudioCode). - Open DevTools with F12 or Ctrl+Shift+I.
Verify: Open any lesson playground and click Run—output appears without installing a compiler.
Local projects: npx create-next-app@latest (Node.js 20+).
Next.js is a React meta-framework: it adds file-based routing, server rendering, data fetching conventions, and production tooling on top of the React you learned in the React track. You still write components—but Next.js decides where they run (server or browser) and how pages map to URLs.
How this track differs from React alone
Plain React in Vite or Create React App is usually a single-page app: one HTML shell, client-side routing, and APIs you wire yourself. Next.js ships opinions for routing, SSR/SSG, metadata, and deployment—especially with the modern App Router (app/ directory).
Our TypeScript track pairs naturally with Next.js: route params, server actions, and props stay typed end-to-end.
What you will learn
- App Router file conventions (
page.tsx,layout.tsx, dynamic segments) - React Server Components vs Client Components and the
'use client'boundary - Fetching, caching, revalidation, loading and error UI
- Forms with Server Actions, cookies, env vars, and deployment basics
- Performance habits: images, streaming, and production checklists
Playground setup
This topic uses the client_nextjs profile: TSX compiles in the browser with React 18 from CDN—same as the React track. Server-only features (RSC, middleware, route handlers on Node) are taught conceptually with file trees and printOutput simulations. The playground strips 'use client' automatically so your editor code matches real project syntax without breaking the runner.
Self-check
- In one sentence, what does Next.js add that React alone does not?
- Why do we recommend finishing React and TypeScript before this track?
Interview prep
- What is Next.js in one sentence?
A React meta-framework for file-based routing, hybrid rendering, server/client component boundaries, and production deployment—not a replacement for React itself.