Explore our curated collection of articles, insights, and stories about Next.js.
Firebase Auth stores its session in an IndexedDB database called firebaseLocalStorageDb. When that connection closes mid-session, sign-in throws InvalidStateError. Here is the cause, the SDK version that changed the behaviour, and a Next.js App Router setup that degrades gracefully.
One Firebase release put "default" before "browser" in the package.json exports map of 30 packages, and webpack's resolver refuses that. Here is the exact error, the diff that caused it, the release that fixed it, and how to find any other package in node_modules doing the same thing.
"You're importing a component that imports react-dom/server" is a compile-time rule of the App Router, not a bug in your code. Here is what the rule protects, which use cases are legitimate, and the fixes verified against Next.js 15.5 and 16.3 with both webpack and Turbopack.
The Firebase Google sign-in popup loses window.closed access when a COOP header isolates the opener. Here's the exact header change that restores the popup flow.
When Firestore throws 'Expected first argument to collection()', it's almost always a missing Firestore instance. Learn the exact fix for Next.js and v9 modular SDK.
Next.js 16 build crashes prerendering the internal /_not-found route. Here are the three actual causes behind it, how to tell which one is yours, and the fix for each.
Next.js 16 replaced implicit caching with the explicit "use cache" directive. Here is what actually breaks when you flip cacheComponents on, and how to fix it without reverting.
The error only surfaces during the production build — dev mode hides it completely. Here is why, and the three fixes ranked by situation.
Without a matcher, proxy.js runs on every request including _next/static and public assets. And Server Functions are not separate routes — a matcher gap silently drops auth coverage.
"ChunkLoadError: Loading chunk 5760 failed" almost always means a user has an old tab open after you shipped a new deploy. The fix is configuration — deploymentId, build IDs, and CDN headers — not a try/catch.
Next.js throws this when a route it wants to render at build time calls a dynamic function — cookies(), headers(), searchParams, or a no-store fetch. The fix is either opt the route into dynamic rendering, or remove the request-time dependency if it should be static.
next/image strictly allow-lists remote hosts. The fix is images.remotePatterns in next.config — matched exactly on protocol, hostname, port, and pathname. Get one wrong (http vs https, a subdomain, a missing port) and it still blocks.
The #1 misconception in the App Router: "use server" is not the opposite of "use client". One marks a client boundary in the module graph; the other exposes callable server functions. Server Components are the default — no directive needed.
A green build only proves the bundle compiled. This postmortem walks through three production-only failures: missing Vercel env vars, Edge runtime imports, and cache behavior that changed after deploy.
Middleware that works locally can disappear in Vercel production because the matcher never matches, Edge bundles a Node-only import, or auth middleware cannot read the token. This guide gives you the diagnosis order I use before touching app code.
If your <Image / component ignores height: 100% and appears too small or misaligned, the issue is almost always that the parent container lacks an explicit
You see "Module not found: Can't resolve 'encoding'" in your Vercel deployment logs. This guide explains why it happens with cross-fetch/node-fetch and how to fix it permanently.
If `router.query` examples keep breaking on you, the problem is usually that you're mixing App Router and Pages Router APIs. Here is the exact fix for each case.
If your redirect works only after render, flickers, or fires in the wrong place, you are probably using the wrong redirect API for the job. Here is the exact mapping.
If your logs, API calls, or subscriptions fire twice in local dev, you are probably seeing React's development-only Strict Mode check. Here is what to fix and what not to panic about.
Learn why your dynamic route parameter appears as undefined in getServerSideProps and how to correctly extract it from the context object for server-side data fetching.
Next.js 15 drops support for older Node versions. Here is how to upgrade to Node.js 18.18.0 or later and fix build errors.
Change the default Next.js port when it collides with another process. Step‑by‑step fix with code, verification, and prevention tips.
A step‑by‑step fix for the React 18 hydration mismatch error in Next.js apps, covering root cause, code changes, verification, and prevention.
When LCP data never appears in your analytics, a missing reportWebVitals export is usually to blame. Follow these steps to fix it.
Learn how to instrument Largest Contentful Paint (LCP) in a Next.js project, send the metric to your analytics provider, and verify that the data is accurate.
A production‑grade fix for the `TypeError: cookies() is not a function` crash that appears in Next.js route handlers after a deploy.
Next.js 15 broke synchronous `cookies().get()`. Every server-side call must now `await cookies()` first. Here's the precise migration — App Router pages, route handlers, Server Actions, and Supabase SSR — plus the codemod that fixes 90% of call sites automatically.
Your Server Action mutates data but the page shows stale values until you hard-refresh. `revalidatePath` is one of those APIs that "succeeds" while doing nothing. Here are the six reasons it no-ops, with the exact fix for each — including the one nobody tells you about: `dynamic = 'force-static'`.
Added images to my Next.js app and watched my Core Web Vitals tank. After debugging for days, here are the 7 fixes that brought my CLS score back to green.
My mutations worked but the UI showed stale data. Took me a week to understand Next.js App Router caching. Here are the 6 fixes that made my data fresh again.
Upgraded to Next.js 15 and suddenly your data is stale — or refreshing too often? The caching model changed completely. Here is what actually happens and how to control it.
Stop shoving everything into the components folder. Learn the Feature-Sliced Design pattern adapted perfectly for the Next.js App Router.
Build a Next.js app that works offline, queues writes, and syncs cleanly to Supabase when the network returns — IndexedDB, sync queue, conflict resolution, with code.
Understand the differences between Server Actions and API Routes in Next.js 15. Learn when to use each approach with real-world examples and performance comparisons.
The 7 optimizations that took a sluggish Next.js + Supabase app from 4.2s LCP to 1.1s — RLS indexes, ISR config, image pipeline, and the connection-pooler trap on Vercel.
Side-by-side benchmarks on real apps — build time, bundle size, runtime perf, and the breaking changes that hurt. The honest verdict on whether the upgrade is worth it.
Hydration mismatch errors breaking your Next.js app? Learn the root causes and 8 proven fixes to eliminate these errors permanently.
Module not found errors only in production? Learn why Next.js builds fail after deploy and get 6 proven fixes that work on Vercel, AWS, and other platforms.
Turbopack stuck on compiling in Next.js 15/16? Learn the exact causes and 5 proven fixes, plus how to disable Turbopack safely with next build --webpack when production builds crash.
Find stories that matter to you.
