React & Next.js
Begin with one complete locked App Router project and trace its root layout and page through development, optimized build, production server, server rendering, and browser output. Then learn React rendering, state, effects, identity, forms, accessibility, Server and Client Components, data and mutation boundaries, testing, performance, security, recovery, and an honestly bounded full-stack capstone.
Platform baseline, project contract, and execution environments
Objective Install one locked project-local framework, render one complete page, and distinguish source, development server, optimized build, production server, server output, and browser result.
Core explanation
React is a library that describes a user interface from components, and Next.js is a framework that supplies a project structure, App Router, server rendering, bundling, development feedback, and production server around React. A component is a function or supported form that returns element descriptions; JSX is the HTML-like source syntax used in the example, while Chapter 2 develops the complete render model. Next.js 16 requires Node.js 20.9 or newer, so run `node --version` and stop for a supported runtime upgrade if the result is older. Inside one disposable `react-first` directory, initialize npm and install exact resolved React 19.2, Next.js 16, React DOM, TypeScript 5, and matching type packages as project dependencies, then inspect and retain package.json and package-lock.json. Add explicit dev, build, and start scripts without relying on an unseen global executable. Save the complete tsconfig.json, root layout, and page shown here; the root layout creates the document shell, and the page file maps to the root URL under App Router conventions. Run the development server on loopback, open its printed URL, verify the two visible sentences, make one text change, restore it, and stop the owned process. Then create the optimized artifact with the build script, start that artifact on loopback with the production script, repeat the same visible check, and stop it. Development can compile on demand and show extra diagnostics, while the optimized build and production server represent a different artifact and execution policy. A visible page proves this route and environment chain, not authentication, durable data, cache correctness, accessibility, security, deployment, or recovery; later chapters introduce those boundaries before the capstone uses them.
Enter React only after the complete browser and TypeScript foundations
This course begins after the complete JavaScript and TypeScript courses, not after seeing a few syntax examples. Reuse their semantic HTML and CSS, browser DOM and events, closures, modules, promises, HTTP and security boundaries, Node and npm setup, lockfiles, project-local TypeScript compiler, static-versus-runtime tests, and artifact evidence. React changes how interface descriptions and state are organized; it does not replace those platform rules. Next.js adds a framework runtime and build, but it does not make an inaccessible control, unvalidated value, unauthorized request, or stale cache correct.
React 19.2 is the stable React line used by this edition and Next.js 16 is the App Router framework line. Next.js 16 requires Node.js 20.9 or newer. In the inherited safe terminal run `node --version` and `npm --version`, record both, and stop if Node is older. Follow the official supported-runtime upgrade path from the JavaScript course before creating the project; do not continue until a new terminal reports a compatible version. No JSX, component, Hook, route convention, framework CLI, Tailwind, Server Component, deployment account, or special editor is required before this chapter.
Install one inspected framework graph without a hidden scaffold
Create and enter one disposable `react-first` directory, run `npm init --yes`, then run `npm install --save-exact next@16 [email protected] [email protected]`. The major or minor tags select the edition line, while --save-exact records the resolved patched versions in package.json and package-lock.json. Add the local build-time contracts with `npm install --save-dev --save-exact typescript@5 @types/node@20 @types/react@19 @types/react-dom@19`. This install needs the package registry. Inspect the exact dependency and lock changes, record the resolved versions and advisory check, and stop on failure rather than borrowing a global framework or another project’s node_modules.
Run `npm pkg set engines.node=">=20.9" scripts.dev="next dev" scripts.build="next build" scripts.start="next start"`. The engines field records the runtime boundary; the three scripts invoke executables from this package’s node_modules. dev owns on-demand development compilation and diagnostics, build creates an optimized `.next` artifact, and start serves an artifact that already exists. None performs a separate linter or test merely because the build is green. Keep lint, type, behavior, browser, accessibility, security, and production checks as named gates introduced later instead of hiding them inside a scaffold whose choices the learner cannot explain.
Trace the root layout and page from TSX source to visible HTML
Save the JSON region as tsconfig.json, create the app directory, save layout.tsx and page.tsx in it, and keep each file’s exact capitalization. TSX is TypeScript source that permits JSX. JSX is HTML-like syntax transformed into React element descriptions; it is not an HTML string and does not itself change the DOM. A component is a function or supported form that returns such descriptions from inputs. RootLayout accepts the selected route content as children and returns the required html and body document shell with `lang="en"`. Page returns a main landmark, heading, and paragraph.
App Router uses file conventions: app/layout.tsx owns the root document layout and app/page.tsx owns `/`. Both are Server Components by default because neither file creates a client boundary. For this static page, Next can execute the component during its rendering or build strategy, create HTML and route resources, and send them to the browser. The browser parses the HTML and displays the text. Chapter 2 explains React render and commit precisely; later chapters introduce client state, hydration, data, caches, mutations, and server/client module graphs only after the baseline route is understood.
Compare development and optimized production evidence before adding features
Run `npm run dev -- --hostname 127.0.0.1`, open `http://127.0.0.1:3000/`, and verify the exact two visible sentences. The explicit hostname keeps the teaching server on loopback. Change only “running” to “ready,” predict one changed word, save, observe development feedback, restore the baseline, and stop with Ctrl+C. Record generated next-env.d.ts and `.next` material separately from authored files; do not edit generated route declarations as the fix for a source problem.
Run `npm run build`, retain the route and diagnostic result, then run `npm run start -- --hostname 127.0.0.1` and repeat the baseline under the optimized artifact before stopping it. Rename page.tsx or remove the root layout one at a time, predict whether route selection or document structure fails, record the visible and command evidence, restore the exact file, and rebuild before making another production claim. Finally copy only authored files plus package and lock metadata to another learner. They install from the lock, reproduce both modes, repair one seeded convention fault, and explain source, generated types, development compiler, optimized artifact, production server, server result, browser result, and cleanup without create-next-app or private coaching.