Next.js
App Router, server components and the framework-specific traps.
34 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.
ERR_REQUIRE_ESM on Vercel but not locally: the Next.js 16.2 monorepo bug
Your Next.js build passes and the Vercel deploy 500s with ERR_REQUIRE_ESM. Here is the missing .next/package.json that causes it, and three workarounds that hold.
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.
Why next dev keeps eating memory, and what actually helps
The Next.js dev server climbing to an out-of-memory crash is not one bug with one fix. Here is how to find which of the four layers is growing, and the mitigations that work today.
JavaScript Heap Out of Memory on next build: Find the Real Cause
Raising --max-old-space-size hides the problem instead of fixing it. Three different build phases can exhaust the heap, and the last log line tells you which one you have.
Users Randomly Logged Out: Fixing next-auth Token Rotation
Auth.js refresh token rotation silently drops the rotated token in four distinct ways, and the popular workaround of disabling rotation is worse than the bug. Here is the real fix.
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.
Dynamic Code Evaluation Not Allowed in Edge Runtime: The Next.js Middleware Fix
Mongoose and jsonwebtoken break Next.js middleware with a dynamic code evaluation error that names no package. Here is the real cause and the fix for each version.
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.
Turbopack 'Cannot Find Module' With Pino and Dynamic requires
Next.js 16 made Turbopack the default bundler and packages that resolve module paths at runtime started breaking. Here is the mechanism and the correct fix, not just the flag.
Auth.js v5 redirects to the wrong URL behind a reverse proxy
Set NEXTAUTH_URL and it still redirects to localhost or the container IP. In v5 the host comes from proxy headers gated by trustHost, and that is the real fix.
ERR_REQUIRE_ESM After a Next.js Upgrade: The CJS/ESM Interop Change Nobody Flagged
A routine Next.js minor bump throws ERR_REQUIRE_ESM on an ESM-only package that worked yesterday. Here is why the interop rules changed and the three real fixes.
NEXT_PUBLIC_ Vars Are Baked at Build Time: Why One Docker Image Can't Serve Staging and Prod
Your prod container still points at the staging API because NEXT_PUBLIC_ vars are string-replaced into the client bundle during next build, not read at container start. The two fixes that actually work.
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 'Found multiple lockfiles': a silent monorepo footgun, not just noise
Next.js picks your workspace root by walking up for a lockfile. A stray one in a Docker layer or template silently changes which files ship. Pin the root explicitly.
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.
useSession() Only Updates After a Manual Reload in the Next.js App Router
NextAuth useSession() stays stale until you reload because the App Router has two session reads. Here is why router.refresh() only fixes half, and the reliable pattern.
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.
Cannot find module '@/...': why path aliases break across transpilePackages
A tsconfig path alias is a compile-time hint that lives inside one package. Import that package into another and the alias evaporates. Here is why, and the fix that holds.
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.
moduleResolution 'NodeNext' Breaks Next.js Type Imports: Use 'bundler'
Setting moduleResolution to nodenext makes TypeScript report 'Cannot find module next/navigation'. Here is why NodeNext is too strict for Next.js and the tsconfig to use instead.
Multi-tenant next-auth: fixing NEXTAUTH_URL without disabling host checks
NEXTAUTH_URL is a single value read once at boot, so multi-domain apps redirect to the wrong host. The workaround everyone posts reopens host-header injection. Here is the safe pattern.
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.
serverExternalPackages Silently Fails Under pnpm and Turbopack
The same Next.js config that externalizes a package under npm gets bundled anyway under pnpm and Turbopack. Here is why, and the workarounds that actually hold.
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.
Tailwind v4 in Next.js: Fixing 'trying to use tailwindcss directly as a PostCSS plugin'
Tailwind CSS v4 moved its PostCSS plugin into @tailwindcss/postcss, so every v3 config breaks a Next.js build on sight. Here is the exact three-file fix.
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.