Why tutorials break after the lesson
Most intro React material assumes everything runs in the browser. Modern Next.js with the App Router asks you to decide where each piece of code runs: on the server, in the browser, or both. That split is powerful, but beginners often understand components and still see errors that sound cryptic because the environment changed underneath them—not because they forgot JSX.
React baggage that still matters
A few patterns cause pain in any React stack; Next.js just surfaces them differently:
- Effects and dependencies. If
useEffectruns at the wrong time, fix the dependency array and state flow before chasing framework bugs. - Derived state. Duplicating data you could compute from props or other state creates “the UI is wrong” moments after navigation or refresh.
- Stable list keys. Using the array index as
keyon reordering lists still bites in app routes and client islands alike.
Next.js-specific stumbling blocks
- Server vs client components. Files under
appdefault to server components. Hooks, event handlers, andwindowbelong behind"use client". Pasting Create React App patterns into a server file is the classic first failure. - Data fetching timing. Fetching during server render is not “on mount.” Learn when data exists at first paint versus after hydration so you do not chase phantom
undefinedvalues. - Hydration mismatches. If the server HTML does not match the client’s first render—common with
Date, random IDs, or locale-only formatting—React warns about hydration. Defer browser-only values to effects or a client boundary. - Environment variables. Only
NEXT_PUBLIC_names are exposed to the browser bundle. Server-only secrets never belong in client code; missing public prefixes in client code breaks assumptions silently. - Routing and structure. Nested folders define URLs. Fighting file-based routing instead of using layouts, loading UI, and error boundaries keeps people stuck longer than necessary.
A habit that helps
When something breaks, ask: “Is this code running on the server or in the browser?” That question alone resolves a large share of early Next.js issues and tells you whether to reach for "use client", move an API call, or fix a hydration mismatch.
How to make progress
Finish one small app—a list page, a detail route, and a form—and keep a log of errors and the smallest change that fixed each one. That log becomes your personal curriculum and beats collecting half-finished tutorials.
At Gratiq we focus on this exact transition: from guided lessons to your codebase, with structure and mentorship so the hard parts feel temporary.