#React
85 posts
Auth and sessions — Auth.js v5 / OAuth / JWT
Choosing between JWT and DB session, Auth.js v5 setup, Credentials and OAuth providers, and patterns for reading the session in four places — RSC · Client · Server Action · middleware.
Capstone — Build a Fullstack Todo App
Tie the patterns from Chapters 1 ~ 33 into one working fullstack service: RSC, Server Actions, DB, auth, and tests.
Component testing — Vitest + Testing Library
Testing components and hooks with Vitest + React Testing Library. render · userEvent · mocking patterns, things to watch in a Next.js setting, and CI integration.
Components and props
We build function components and look at the basic pattern for flowing data via props. The foundation for the interfaces we solidify with TypeScript in Chapter 17.
Conditional rendering
Patterns for splitting the UI with if · ternary · && · null returns, plus common traps — especially the trap of the number 0 on the left of `&&`.
Context and generic components
Type-safety patterns for Context (null + wrapper hook), splitting state and dispatch, generic components, and the as prop of polymorphic components, all in one chapter.
Custom hooks
The standard tool for reusing logic. What a good hook's interface looks like, the patterns that come up often, and the cases where you should not extract a hook.
Data fetching and caching
Fetching data directly with `async / await` inside Server Components, the Next.js 15 fetch cache options (`force-cache` / `no-store` / `revalidate`), route-level options, parallel fetching, and `error.tsx`.
Deploy and observability — Vercel · Cloudflare Pages · Sentry · PostHog
Deploying Next.js to Vercel and Cloudflare Pages, preview deploys, environment variables, error tracking with Sentry, product analytics with PostHog. The toolkit for the first four weeks after launch.
E2E testing — Playwright
Automating full scenarios in a real browser with Playwright. Setup, locator rules, auth via storageState, the page object pattern, taming flaky tests, CI integration, and visual regression.
Event handling
React's synthetic event system, writing event handlers, passing arguments, and the common traps. The foundation for Chapter 19 (typing events) and Chapter 27 (Server Actions).
Handling forms (controlled inputs)
Controlled components, the canonical pattern for forms in React. Plus how textarea · select · checkbox · radio all follow the same model.