Get the most from each lesson’s live editor—the same habits transfer to local create-next-app projects, even though full server rendering only runs on Node in real apps.
Recommended workflow
- Read the concept section before editing code—especially server vs client boundaries.
- Click Run in browser to compile TSX and execute in the preview iframe.
- Use
printOutput(...)to simulate server results, route params, or cache keys in early and conceptual lessons. - When a lesson shows UI, call
mountApp(<YourComponent />)— Client Component patterns render in#root. - You may write
'use client'at the top like a real project; the runner strips it here so TSX still executes in the browser sandbox. - Change one idea at a time—one hook, one prop, one simulated fetch.
- Reset the editor if you drift far from the lesson goal.
What happens when you Run
- TSX transpiles in the browser (same mental model as local
tsc+ JSX). - React 18 loads from CDN; destructure hooks:
const { useState } = React; - Server-only lessons use terminal output and HTML file-tree examples—replicate those files locally with
npx create-next-app@latestwhen ready.
Review React intro if hooks confuse you, and TypeScript intro if prop types block progress.
Self-check
- Why does the playground strip
'use client'? - When should you use
printOutputvsmountAppin this track?
Challenge
First Next.js run
- Click Run in browser with the default code.
- Confirm
typeof Reactprintsobject. - Add a
printOutputwith your favorite App Router feature name.
Done when: the terminal shows React types and your custom message.