Fix: useRouter query undefined on first render
Why Next.js hydrates a dynamic Pages Router page with an empty query object, how router.isReady fixes it, and why the App Router does not have this exact problem.
Explore our curated collection of articles, insights, and stories about Next.js.
Why Next.js hydrates a dynamic Pages Router page with an empty query object, how router.isReady fixes it, and why the App Router does not have this exact problem.
Separate an old Node limitation from a missing Jest global, then verify the stream reads, writes and closes without replacing the Worker runtime.
A local reproduction separates the host-trust guard from proxy configuration, environment inference and later sign-in failures.
Find the plugin behind the unexpected webpack hook, choose a compiler deliberately, and verify that the behaviour you need still runs.
Find the server that owns .next/dev/lock, distinguish a held lock from a leftover file, and restart without disrupting other Node applications.
Trace the lockfile behind an unexpected workspace root, choose the right standalone or monorepo boundary, and separate a reported memory spike from a verified cause.
Why an empty state object makes React treat a text field as uncontrolled, what the React 19 wording looks like, and the react-hook-form variant of the same warning.
Why this error takes down the whole page instead of one component, and the two separate causes behind it: broken DOM nesting and no Suspense boundary above the failure.
The three warnings this rule prints for one fetch function, which remedy each one wants, and a measured run showing what silencing it costs when a prop changes.
Why this error appears on unchanged Next.js projects overnight, which TypeScript actually raises it, and the one-line ambient declaration that fixes it under both compilers.
Why a line chart ignores fill: true, the console warning that names the cause, the per-chart and chart.js/auto alternatives, and what each one costs in bundle size.
A wider Cypress viewport does not guarantee the desktop picker. Diagnose the media query first, then test the UI your users actually receive.
Block mismatched submissions, display the field error, and catch a confirmation that becomes stale after the user edits the original password.
Follow the server entrypoint from the Next.js build into the final image, then check the application and its static files separately.
Keep the page on the server while repairing Container.Window: direct named imports work, and changing to a default export alone does not fix this case.
Which of this 2017 question's three answers still applies today, the one react-scripts already handles for you by default, and the fix that works for the rest.
Three different, unrelated situations produce the exact same Heroku crash — here is how to tell which one is yours before you change anything.
Why a CORS header that passes on localhost can still get blocked once Vercel routes the request, and the one-layer fix Vercel documents for it.
Declare the variable once, in env or globalEnv, and both the lint error and the silent runtime drop under Strict Mode disappear.
The 2015 bug reproduced today, the exact modern error text, what the production build shows instead, and the one-line fix for every cause.
The 2015 wording still fires in Babel today, but Next.js shows a different message for the same mistake, and wrapping the tags is not always the whole fix.
Reproduced line by line with Next.js's own polyfill file and abortcontroller-polyfill's published source across Node 16, 17 and 18, plus which of two independent fixes actually applies.
Why a JetBrains IDE flags Routes from react-router-dom 6 as unknown while the app builds, how to prove which typings file it reads, and the order of steps that stops the old copy coming back.
What the browser's no-cors suggestion really does to an authenticated API call, the one case where it is the right answer, and the two fixes that return your data.
See why npm refuses the old @material-ui packages on a React 18 or 19 project, which packages to install instead, and why --legacy-peer-deps on React 19 only moves the failure to runtime.
Why next/font/google warns about font override values for newer Google Fonts, why the popular fix only works on webpack, and how to get the CLS fallback back.
Reproduced on Next.js 13.1.0, 13.2.0 and 16.4.3: why a NextResponse.next() middleware broke the 404 page, why the same invariant still fires after a redeploy, and the catch that stops it.
Why cors() on your Express API cannot fix a Google sign-in started with fetch, and the three navigation patterns that make the error disappear.
Where the interest-cohort warning came from, why the meta-tag fix does nothing, and the base-path change that actually brings a blank GitHub Pages app back.
Reproduced on Next.js 16.4.2: why redirect() inside try/catch logs Error: NEXT_REDIRECT, sends users to the wrong URL or returns a 500, and the three fixes that hold.
Reproduced on Next.js 16.4.2: the relative redirect that throws, the absolute redirect that then loops on itself, and the basePath case where new URL quietly drops the prefix.
Reproduced on Next.js 16.4.2: with an icon in both app/ and public/, next dev and next start served different files without a warning. Where each icon file must live, and what renaming to icon.ico really changes.
Why the combobox is the one component the CLI cannot find in an older shadcn project, reproduced with shadcn 4.22.1, and the one-line change for each Tailwind version.
Read the path list as a map back to your own code: /about/undefined, /components/Navbar and /about/[slug] each point at a different bug, rebuilt on Next.js 16.4.2 (and the first on 14.2.35 too).
Reproduced on Next.js 16.4.2: why app/api/admin/all.js answers 404, what a 405 means instead, and the static export case that only 404s in production.
The JSON is in DevTools but never reaches your code: see why an opaque response has nothing to parse, and the two fixes that actually return the data.
Reproduced on next-auth 4.24.15 and Next.js 15.5.28: why sign-in works on localhost but fails after deploy, what a 404 versus a 500 at /api/auth/error tells you, and the env change that fixes it.
Why key={index} breaks on reorder and removal, how to prove it with an uncontrolled input, and the three ways to get a real key when your data has no id.
The exact ESLint rule that throws this, the six code paths that produce six different wordings, and the one move that actually silences it.
Why Vercel answers 404: NOT_FOUND for an Express app that runs locally, and the two things to check: the entry file Vercel looks for, and a leftover Build command/Output Directory setting.
Why next dev or next build refuses to start, what actually happens when npm cannot find the right @next/swc binary, and the one reinstall that puts it back — reproduced on Next.js 16.4.2.
Reproduce the production-only Vite error in Chromium, see why retrying the same import does nothing, and ship a reload handler that cannot loop.
Separate a missing DevTools response body from a failed download, then capture and check the contents without relying on a 200 status or a guessed size limit.
Separate an absent build from the wrong application root, a mismatched output folder and development artifacts, using the file the production server checks.
A working global Sass entry point, the rename-only trap, and the different rule for App Router projects, checked against current Next.js builds.
Why v5-style routing code crashes on React Router 6 and 7, the two-step migration that fixes it, and the second error that appears if you only do half of it.
Read the caret line to find the exact prop, then keep that function on the client side of the boundary: four reproduced shapes on Next.js 16.4.0, and why "use server" rarely fixes it.
Why fetch("/api/products") works after a client-side click but throws on refresh, what each fetch implementation prints, and the two fixes that hold in both routers.
Find out in two commands whether your react-scripts bin lost its execute bit or lives on a noexec filesystem, then apply the fix that matches, instead of chmod 777 and sudo.
Reproduced on next-auth 4.24.15 and 5.0.0-beta.32: what signIn() returns on a wrong password, why the accepted if (ok) check breaks on v5, and how to get a usable error code.
Reproduced on Next.js 13.4.3 (Linux and Windows), 15.4.11 and 15.5.27: why exporting authOptions from the NextAuth route breaks the build only, and the one-file move that fixes it.
Two characters of parentheses decide whether TypeScript hands back a mutable ref or a read-only one. Here is how to read the overloads and fix the ref in place.
Why npm install, npm ls and update-browserslist-db all report a healthy tree while the error stays, and the one reinstall that actually puts the missing files back.
A Firebase v8 tutorial pasted into a project with a current firebase package: why firebase.apps is undefined, the two imports that fix it, and what Turbopack prints instead.
Decode #425 and its companion #423, reproduce both triggers from the Stack Overflow thread on Next.js 12.2.5, and see what React 19 prints instead.
Reproduced on Next.js 16.4.0 with webpack: which import triggers the error, why bare "buffer" builds but "node:buffer" does not, and the three fixes that compile.
Reproduced on Next.js 16.4.0 and 13.5.11: why the carousel import crashes the App Router, the two-file fix that keeps your page a Server Component, and the error that comes next.
The exact fix for the ECONNREFUSED ::1:1337 error between Next.js and a local Strapi API, and why it depends on your Node version.
Reproduced on Next.js 12.3.4, 13.0.0 and 16.4.0: why the session prop broke in _app.tsx, the one-line generic that fixes it, and why the d.ts override only seems to work.
The cookie banner from the Stack Overflow question, rebuilt on Next.js 16.3.8: why 'use client' does not stop the crash, the useEffect fix, and the other errors Node 25 and 26 print.
A Date prop cannot go straight from getStaticProps to the page — convert it first, or the page will not build.
Work out which of the three access rules blocked your commit, fix the author identity or the team setup, and get pushes deploying again.
Which URL serves a file from public/, why next/image answers 400 instead of 404, and what basePath and a production server change.
Why <Logo /> fails with "Element type is invalid" or "Module parse failed", and the SVGR setups that build on Next.js 16 with both bundlers.
The browser, not your server, is refusing the response — read the exact wording of the console error to know which of three fixes actually applies.
Get headless Chromium launching again in a Vercel Function or on AWS Lambda, and understand why pinning Node 14 was never a real fix.
In 2023, self-hosted Next.js App Router apps were reported eating memory until the host killed them. Issue #49929 ran three months and 131 comments; it found a high process baseline and one canary-only Node.js fetch() leak.
A root layout error boundary that looks broken in development but works fine once deployed. The dev-overlay behavior behind it, and how to verify global-error.tsx before you ever hit production.
Separate the old React warning from a persistent resource leak and from out-of-order responses while the component is still mounted.
A Server Component cannot hand a function to a Client Component as a prop — functions are not serializable across the RSC boundary. Where to put "use client" instead, with the three shapes this bug actually takes.
A hook-using component can inherit a client boundary from an importing module. Choose a small entry point so interactive code does not pull unrelated imports into the client bundle.
middleware.ts runs with no errors but never fires. The three real causes — wrong file location, a matcher that excludes your route, and Node-only imports on the Edge runtime — checked in the order that finds the bug fastest.
useRouter() throws "NextRouter was not mounted" when it runs outside a Pages Router page tree. The three real causes — tests, Storybook, and App Router migrations — and the fix for each.
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 __barrel_optimize__ warnings come from Next.js rewriting MUI's barrel file imports. They are usually benign — but they can hide a real bundling problem. Here is how to tell the difference and silence them properly.
Turbopack dev servers throw "Failed to execute 'measure' on 'Performance': cannot have a negative time stamp" on notFound(), redirect() and dynamic imports. Here is each cause, its confirmation test, and the workaround.
Next.js restarts itself when the Node heap crosses its limit. The message is a symptom, not a cause. Here is how to find the leak, the dev-mode fix (Turbopack), and the production levers that actually lower the floor.
Next.js App Router resets scroll to the top whenever searchParams update, even on the same page. Here is the root cause and the scroll={false} fix that actually keeps the user's position.
`next lint` is gone in Next.js 16, `next build` no longer lints, and the `eslint` block in next.config is ignored with a warning. You must run ESLint directly with a flat config. The official codemod does most of it; the rest is scripts, CI, and the few footguns the upgrade guide skips.
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.
The official migration path covers files and APIs. This guide covers the gotchas that break production: cookies timing, removed router events, metadata conflicts, client boundaries, and Edge auth.
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.
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.
Fix ESLint's 'Cannot find module next/babel' parsing error in Next.js 13+ projects by updating your ESLint config and understanding SWC vs Babel resolution. Works in monorepos too.
React 18 Strict Mode intentionally runs effects twice in development to catch side effects. Here's how to handle it safely in production.
A step‑by‑step guide to remove the "Extra attributes from the server" hydration warning in Next.js, covering root cause, fix, and verification.
Get rid of the 'window is not defined' error in Next.js by moving browser‑only code behind a safe check or using dynamic imports. The guide walks you through the exact changes.
Change the default Next.js port when it collides with another process, and know why next dev sometimes moves to 3001 on its own while next start crashes.
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.
Why cookies() became async in Next.js 15, the error it throws, and the exact patterns that fix session reads in the App Router.
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 a URL served through a rewrite and a second page that reads the same tagged data.
next/image only prevents layout shift when it can reserve space. Eight fixes for CLS and LCP problems caused by images, each checked against the Next.js and web.dev documentation.
Middleware patterns for Next.js 15, grounded in the Edge runtime docs: authentication, rate limiting, A/B testing, geolocation, bot blocking, CSP headers, and request logging. Every pattern ships with working code.
A practical, production-focused deep dive into Next.js 15 Partial Prerendering — how it actually works, when it wins, the traps nobody warns you about, and how to migrate an existing app without breaking it.
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.
A typed Dexie queue, stable sync lifecycle and account-scoped cache, with explicit boundaries for offline edits and mocked failure-path tests.
Master Next.js Server Actions with Supabase. Build type-safe, progressive forms with validation, error handling, optimistic updates, and production-ready patterns.
Master data fetching in Next.js with Supabase. Learn Server Components, streaming, parallel queries, caching strategies, and performance optimization patterns.
Complete guide to webhook handling and event-driven architecture with Next.js and Supabase. Learn webhook security, retry mechanisms, event sourcing, and distributed system patterns.
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.
Ten fixes for slow Next.js + Supabase apps, each grounded in the official docs rather than a single unverifiable case-study number — RLS-indexed columns, N+1 joins, the connection-pooler trap on serverless, image transforms, and caching layers.
What Next.js's own release notes actually say changed between 14 and 15 — caching defaults, async APIs, and Turbopack's real (and still-partial) stability status — plus the breaking changes that hurt on upgrade.
Master Next.js performance optimization techniques. Learn how to achieve perfect Core Web Vitals scores, optimize images, reduce bundle size, and deliver lightning-fast user experiences.
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.