Goal Learn to diagnose this phase's failures systematically instead of reinstalling packages, changing random configuration, or copying a fix without understanding it.
The debugging loop 1. Reproduce the failure with the smallest reliable action. 2. Capture the exact symptom: command, status code, stack trace, network request, database state, or UI state. 3. Locate the earliest boundary where actual behavior diverges from expected behavior. 4. Form one hypothesis. 5. Change one variable. 6. Re-run the same reproduction. 7. Keep the fix only if the evidence supports the hypothesis.
Boundary walk Route request -> App Router match -> layout/page Server Component -> optional server fetch -> Client Component island -> browser interaction
Start at the visible symptom and walk backward. Do not debug the database when the browser never sent the request. Do not debug React state when the API is returning a deterministic 403. The boundary walk tells you which evidence to collect next.
Failure drill 1 — Adding 'use client' too high in the tree Create or imagine this failure in a safe development environment. Write the expected symptom first. Then list the two or three observations that would distinguish this failure from neighboring causes. Repair it with the smallest change and verify the original reproduction no longer fails.
Failure drill 2 — Accessing browser APIs from Server Components Create or imagine this failure in a safe development environment. Write the expected symptom first. Then list the two or three observations that would distinguish this failure from neighboring causes. Repair it with the smallest change and verify the original reproduction no longer fails.
Failure drill 3 — Leaking secrets through NEXT_PUBLIC variables Create or imagine this failure in a safe development environment. Write the expected symptom first. Then list the two or three observations that would distinguish this failure from neighboring causes. Repair it with the smallest change and verify the original reproduction no longer fails.
Failure drill 4 — Using effects for work that belongs in server rendering or a data layer Create or imagine this failure in a safe development environment. Write the expected symptom first. Then list the two or three observations that would distinguish this failure from neighboring causes. Repair it with the smallest change and verify the original reproduction no longer fails.
Do not hide the evidence Avoid immediately clearing caches, deleting lockfiles, resetting the database, disabling security checks, or reinstalling everything. Those actions may erase the evidence that teaches you what was wrong. Use them only after you can explain why they are relevant.
Debugging exit ticket Pick one failure from this workshop and write a short incident note: symptom, scope, root cause, fix, verification, and prevention. This is the same communication pattern used in professional bug reports and production incident follow-ups.
Next.js is useful only when you can explain what runs on the server, what crosses into the browser, and which route owns a user-visible state.
Restate the goal of “Debugging Workshop” as one observable behavior. Write the success signal before touching code.
Trace the boundary map: route → Server Component → client boundary → request/data source → rendered UI. Mark the one boundary this lesson changes.
Inspect the current repository state and record the exact files, route, table, or runtime involved. Avoid creating an abstraction before you can name the existing owner.
Implement the smallest vertical slice. Add one coherent change, run the narrowest verification command, and read the output before continuing.
Connect the slice to TaskFlow’s phase artifact: A navigable TaskFlow web shell with route groups/layouts, server-first composition, selective client interactivity, and verified environment handling.. Verify behavior from the outside as a user or API client would.
Create one controlled failure that is safe to reproduce. Predict the symptom first, capture evidence, locate the earliest broken boundary, then fix only that cause.
Close the reference and rebuild or explain the core change from memory. Record what you would monitor or test before trusting the same change in production.
// app/tasks/page.tsx
import { TaskList } from "./task-list";
export default async function TasksPage() {
const tasks = await loadTasks();
return <TaskList initialTasks={tasks} />;
}Do not copy this as a finished answer. Predict what each boundary does, type the smallest useful slice, run it, then compare the result with your prediction.
Locate the first browser-only API or stateful hook and move the client boundary to the smallest component that needs it.
Verify route params, fetch location, cache behavior, and the exact server response before changing JSX.
Without copying the final source, create a second small scenario that applies “Debugging Workshop” to a different TaskFlow resource or input. Write the acceptance criteria first, implement it, and provide the evidence that each criterion is satisfied.
Add one Client Component for interaction and explain what 'use client' changes in the dependency graph.
Use the smallest change that demonstrates this lesson. Stop after it works and capture evidence.Accessing browser APIs from Server Components
Predict the symptom before causing the failure. Then locate the earliest boundary where reality diverges from expectation.Why does this responsibility live here, what input does it trust, what output proves success, and what would go wrong if another layer owned it?
If your explanation is vague, repeat the boundary trace before moving on.Close the reference. Reproduce the core idea from memory or explain the exact request/data flow aloud. Then check your diff or notes for accidental shortcuts that bypass validation, authorization, error handling, or verification earned in earlier phases.