React
Components, state, effects and the re-render bugs everyone hits.
19 articles
CSP 'unsafe-inline' Is Not a Fix: Nonces That Work in Next.js
Adding 'unsafe-inline' to silence CSP violations turns the header into compliance theatre. Here is the per-request nonce setup for Next.js that keeps hydration working.
Storing JWTs in localStorage Turns Any XSS Into Account Takeover
Every JWT tutorial puts the token in localStorage. Here is what that costs when XSS lands, and the in-memory access token plus HttpOnly refresh cookie setup that replaces it.
Decoding minified React error #418, #423 and #425 in Next.js production
Production React ships numbers instead of messages. Here is the decoder, what each hydration code actually says, and why you can reproduce all of it locally.
Next.js Hydration Failed: Find the Real Mismatch, Not the Suppress Flag
Hydration failed and the overlay will not say which element. Here is the diff technique that finds it, the five real causes, and why suppressHydrationWarning is not a fix.
DynamicServerError: Every Way Next.js Opts a Route Out of Static Rendering
The App Router prerenders every route until one request-time API bails the whole thing. Here is the complete trigger list, what changed in 15 and 16, and the real fix.
Why Next.js Never Warned You About That Non-Serializable Client Prop
TS71007 only runs in your editor, and only on named exports. Two stacked gaps mean nothing in CI stops a bad Client Component prop. Here is a gate that actually fails a build.
export const revalidate Is Ignored in Production: How to Find Out Why
Your Next.js revalidate export works with next start but the production page never updates. Here is how to tell which of the four caches is actually lying to you.
Next.js Meta Tags in the Body Instead of the Head: What Actually Breaks
Next.js App Router puts your title and og: tags at the end of the body. It is streaming metadata, not a bug. Which crawlers care, and the one config line that stops it.
suppressHydrationWarning Isn't Cosmetic: It Freezes the Server Value
suppressHydrationWarning stops React patching mismatched text, so localized dates stay stuck at the server value forever. The mechanism, and the two-pass render that fixes it.
searchParams Is Empty in Production but Works in next dev: the Static Rendering Contract
Your page reads searchParams fine in next dev, then ships to production with empty query params or a Dynamic server usage build error. It is the static/dynamic rendering contract, not a bug.
Next.js 16.0.1 Fails next build on /_not-found: An Open Regression
Next.js 16.0.1 can break next build while prerendering the not-found page, even though next dev works. Here is how to confirm it, pin safely, and gate CI.
React.lazy Infinitely Remounts in Turbopack Dev: It Is Not Your Zustand Store
A React.lazy plus Suspense subtree with many useSyncExternalStore selectors mounts, unmounts and remounts forever in next dev. Why it is a Turbopack dev bug, and two clean workarounds.
useSearchParams() Should Be Wrapped in a Suspense Boundary: The Error Only Your Build Sees
Why useSearchParams() passes in next dev and kills your CI build, what the CSR bailout actually does, and the Suspense split that keeps the rest of the page static.
Functions Cannot Be Passed to Client Components: the RSC Boundary Explained
Next.js throws when you pass a function from a Server Component to a Client Component. Here is why the serialization boundary rejects it, and the two real fixes that are not turning the page into a client component.
next/script beforeInteractive breaks hydration in App Router layouts
A beforeInteractive script runs before React hydrates. If it touches <html> or <body>, the server and client markup no longer match and you get a hydration error. Here is the real fix.
Next.js Hydration Mismatches That Are Not Your Fault: Turbopack and Edge Causes
Every hydration article blames Date.now() and browser extensions. When the mismatch is a color-scheme attribute or a path that resolves differently on Vercel Edge, that advice is useless.
revalidateTag() Not Invalidating Cache? The Debugging Checklist
revalidateTag returns fine but the data stays stale. Here is the four-step checklist: tag every fetch, match strings exactly, and see what is actually cached.
revalidate = 0 Isn't Stopping Next.js From Caching Your Supabase Data
revalidate = 0 tunes the Data Cache, but Supabase data is frozen in the Full Route Cache from static rendering. Force the route dynamic instead. Here is the real fix.
next/dynamic Named Imports Cause Hydration Errors: The Real Fix
That hydration error from a dynamically imported library is often an import bug in disguise. Why named exports resolve to undefined, and the .then() plus client-wrapper fix.