Next.js Errors: Build, Dev Server, Rendering & Routing Fixes
Pages are grouped by where the error shows up: the dev server, the build or deploy, the rendered page, routing, or images. Errors that involve Supabase as well live in the Next.js + Supabase hub.
Dev server & local setup
11 itemsNext.js 16 Removed next lint: ESLint 9 Migration
Next.js 16 removed next lint and no longer lints on build. Migrate to ESLint 9 flat config with the codemod, an eslint.config.mjs, and the CI step.
How to Change the Port in Next.js (dev and start)
Next.js defaults to port 3000. Move it with -p or PORT, or fix EADDRINUSE by stopping the process that holds the port — commands for macOS, Linux, Windows.
Fix: blocked by CORS policy from origin localhost:3000
"has been blocked by CORS policy" on a local API call almost always means a missing or wildcarded Access-Control-Allow-Origin header. Here is the fix.
Why global-error.tsx Doesn't Fire in Next.js Dev Mode
global-error.tsx never renders in next dev — you see the red overlay instead. Documented, not a bug, with three checks to confirm it's wired right.
Can't Import SVG in Next.js: Fix for Turbopack and Webpack
A plain SVG import is a static image object, not a component. Use next/image, or add @svgr/webpack via turbopack.rules or a webpack rule.
Fix 'Next.js 15 requires Node.js 18.18' Build Error
next build failing with a Node version error? Next.js 15 needs Node 18.18.0+. Check node -v, upgrade via nvm, and pin engines in package.json for CI.
Fix: FetchError request to localhost:1337 ECONNREFUSED ::1
Node 17+ changed how localhost resolves to ::1 vs 127.0.0.1, a factor in this ECONNREFUSED — switch the URL to 127.0.0.1 to remove the ambiguity.
Fix 'authOptions' is not a valid Route export field
next build fails because route.ts exports authOptions next to GET and POST. Move the NextAuth options to lib/auth.ts and import them in the route.
Failed to find font override values: next/font/google fix
Next.js has no capsize metrics for that Google font. Set fallback (Turbopack) and adjustFontFallback: false (webpack), or switch to next/font/local.
Fix Turbopack Build Errors from a Webpack Config
Next.js detects a webpack hook under default Turbopack. Choose webpack explicitly, remove an unused wrapper, or migrate the required behaviour.
Fix Turbopack's Wrong Workspace Root Warning
A stray parent lockfile can widen the inferred Turbopack root. Set an explicit absolute root, then verify the path before investigating RAM growth.
Build & deploy errors
32 itemsFix ChunkLoadError: Loading chunk failed (Next.js, webpack)
ChunkLoadError right after a deploy is version skew, not broken code: stale HTML requesting renamed hashed chunks. The Next.js config that stops it.
Next.js 16 /_not-found Prerender Build Error: The Real Fix
Your Next.js 16 build fails prerendering /_not-found. Three real root causes (Client Component functions, workUnitAsyncStorage, third-party headers()) and the fix for each.
Next.js 16 "use cache" Errors: Why Cache Components Break
Enabled cacheComponents in Next.js 16 and everything broke? Here are the real errors — cookies/headers inside cached code, missing cacheLife — and how to fix each.
Fix Dynamic Server Usage Error in Next.js App Router
'Dynamic server usage: couldn't be rendered statically' means Next tried to prerender a route needing request-time data — here's the fix.
Fix Module not found: Can't resolve 'encoding' in Vercel
Resolve the encoding module error in Next.js builds on Vercel when using Supabase and cross-fetch. Includes webpack config and dependency fixes.
Next.js Middleware Not Running on Vercel: 3 Causes
Next.js middleware not running on Vercel? Fix matcher misses, Edge Runtime imports, and NextAuth token failures with a production-safe debug flow now.
Fix Vercel 'Git author must have access to the project'
On a private org repo, Vercel deploys a commit only if its author owns the Hobby team or is a Pro member. Fix your Git email or move to Pro.
Fix /tmp/chromium libnss3.so Error on Vercel and Lambda
libnss3.so missing on Vercel: chrome-aws-lambda never unpacks its NSS libraries on Node 16+. Swap to @sparticuz/chromium with a matched puppeteer-core.
Next.js Build Passed But Production Broke
Next.js build passed but production broke? A postmortem on missing Vercel env vars, Edge imports, cache drift, runtime bugs, and prevention checks now.
Fix error:0308010C digital envelope routines::unsupported
Webpack 4 hashes modules with MD4, which OpenSSL 3 in Node 17+ refuses. Upgrade webpack or react-scripts, or use --openssl-legacy-provider for now.
Fix UnhandledSchemeError: Reading from "node:buffer"
A file bundled for the browser imports node:buffer, and webpack has no reader for node: URIs. Keep the import on the server or use a browser API.
Fix Can't resolve 'fs' When Importing pg in Next.js
pg ends up in the browser bundle, which has no fs, dns, net or tls. Create one Pool in a server-only module and query it from server code only.
NextAuth login failed: handle CredentialsSignin, v4 and v5
Client signIn() resolves, not rejects, on bad credentials. Read result.error, not ok: on next-auth 5.0.0-beta.32 a failed login returns ok: true.
Docker Hostname ENOTFOUND in Next.js Prod but Not in Dev
getStaticProps runs inside docker build, which is not on the Compose network, so the service name fails. Fetch at request time instead.
Fix Next.js missing .next/BUILD_ID at server startup
Diagnose the missing .next/BUILD_ID error: verify the application directory and distDir, run next build successfully, then start from that same folder.
Fix Failed to fetch dynamically imported module (Vite)
An open tab asks for a hashed Vite chunk that your last deploy deleted. Serve index.html with no-cache and reload once on vite:preloadError.
Next.js "Failed to load SWC binary": the real fix
The native SWC binary for your platform is missing from node_modules. Delete node_modules and the lockfile, then reinstall on the target platform.
Next.js builds locally, fails in Docker: fix the image error
TypeError: Failed to parse URL from .../mozjpeg_node_dec.wasm on next build inside Docker is a missing sharp dependency, not a broken Dockerfile.
Fix Vercel 404: NOT_FOUND Deploying an Express App
An Express app deploys fine but every route returns 404 on Vercel. Usual cause: no entry file (app/index/server) Vercel recognises as the Express function.
Fix NeonDbError: Error connecting to database: fetch failed
The Neon HTTP driver got no HTTPS reply from api.<region>.aws.neon.tech. Log sourceError.cause.code to tell DNS, timeouts and host typos apart.
Next.js + Strapi in Docker: fetch failed ECONNREFUSED 1337
localhost:1337 is the Next.js container itself. Server code must call http://backend:1337; the browser keeps localhost:1337. Use two Strapi URLs.
Fix next-auth /api/auth/error in production: NO_SECRET
next-auth v4 refuses to run in production without a secret, so sign-in lands on /api/auth/error. Set NEXTAUTH_SECRET and redeploy.
Fix Export encountered errors on following paths in Next.js
The list names pages whose prerender threw during next build. The real error is printed above it: often an undefined path or a component inside pages/.
Fix Invalid options object: allowedHosts[0] with CRA proxy
With proxy set, react-scripts 5 sends webpack-dev-server an undefined allowed host if HOST names a host or no private IP exists. Use setupProxy.js.
Fix: Cannot set property Request of #<Object> getter
Next.js's Node fetch polyfill makes Request getter-only below Node 18; a package that still patches fetch can't reassign it, so the build throws.
Fix secretOrPrivateKey must have a value in NestJS JWT
JwtService listed in a module's providers is a second copy with no secret, so jsonwebtoken refuses to sign. Remove it and let JwtModule provide it.
Fix: sh: 1: next: not found on Heroku
Heroku's dyno has no next binary right now — it was never installed, pruned as a devDependency, or the release simply predates the fix.
CORS Not Working on Vercel? Fix the vercel.json Headers
Vercel never adds CORS headers for you. Set them in one layer — vercel.json, middleware, or the function — and check Deployment Protection first.
Fix Next.js Docker: Cannot find module '/app/server.js'
Next.js Docker cannot find /app/server.js when standalone output is missing from the runner. Generate it, copy it, and start the generated server.
Vite server running but not working on localhost: 3 causes
An empty 404 from a running Vite server means index.html sits in public/, not the root. Otherwise check the address Vite bound and the port it printed.
Fix Next.js: Unable to Acquire the Dev Server Lock
Another server holds the Next.js output lock. Stop the verified owner, then restart; changing the port does not release the lock.
Fix Auth.js UntrustedHost in Production
Auth.js rejects an untrusted request host. Secure your proxy headers, enable host trust in the server runtime, then verify the public auth URLs.
Rendering & hydration
27 itemsWindow is not defined in Next.js – 2026 Fix for React Apps
'window is not defined' in Next.js? The cause and a concise fix that works in both server and client environments.
NextJS Warning: Extra attributes from the server – Fix 2026
Seeing 'Extra attributes from the server: data-new-gr-c-s-check-loaded'? Why it appears and how to eliminate it in Next.js + Supabase.
useSearchParams Suspense Error: 3 Real Fixes (Next.js 15)
useSearchParams forces client-side rendering during static builds. Wrap it in Suspense or switch to the searchParams page prop — both fixes shown in full.
Fix: react-dom/server Import Error in Next.js App Router
Next.js rejects react-dom/server in Server Components and Route Handlers. Why the compile error exists, and the 3 fixes that work on Next.js 15 and 16.
use client vs use server in Next.js: The Real Difference
"use server" does NOT make a Server Component — it marks server functions callable from the client. "use client" marks a boundary in the import graph.
Fix: Can't Perform a State Update on an Unmounted Component
A late state update is ignored after unmount. Clean up subscriptions and cancel or ignore obsolete fetch results; a finite Promise is not itself a leak.
Postmortem: The Next.js App Router Memory Leak of 2023
A 131-comment GitHub thread, three months, two confirmed fixes: what issue #49929 actually found behind App Router memory growth, sourced from the issue.
Fix localStorage is not defined after 'use client' (Next.js)
Next.js still renders 'use client' components on the server, where the browser's localStorage does not exist. Read it in useEffect, never during render.
Super expression must either be null or a function: Next.js
A Server Component imports a class-based package such as react-responsive-carousel. React.Component is undefined there. Import it from a use client file.
Minified React error #425: Text Mismatch After Deploy
#425: server text differs from the first browser render. A date in render: move it to useEffect. A <style> with a > selector: use <style jsx>.
Fix Functions cannot be passed directly to Client Components
A Server Component passed a plain function to a Client Component. Define it on the client side, pass an element or data, or use a Server Function.
Fix response data evicted from inspector cache in Chrome
Chrome may discard its inspection copy while your app still receives the response. Save a fresh request to a file and verify the actual payload.
SyntaxError: Unexpected end of input with mode: 'no-cors'
mode: 'no-cors' gives fetch an opaque response with a null body, so response.json() throws. Remove the mode and send CORS headers from the API.
Unrecognized feature: 'interest-cohort' on GitHub Pages
A harmless Chrome warning about an old GitHub Pages header. Ignore it; if the page is blank, fix the asset path with homepage or Vite base.
Set the request's mode to 'no-cors'? What to do instead
Taking Chrome's hint silently drops your Authorization header, so a preflight error becomes a hidden 401. Allow the header on the API or proxy the call.
Adjacent JSX Elements Must Be Wrapped in an Enclosing Tag
A component returning two sibling JSX tags with no shared parent throws this at parse time. Wrapping them clears it in Babel, TypeScript and Next.js alike.
Fix: Objects Are Not Valid as a React Child
React only renders strings, numbers, elements and iterables — never a plain object, a Date, or double braces. The fix for each, verified on React 19.3.1.
Fix 'props.handleSelect is not a function': wrong prop
A child component reads props.handleSelect, but the parent passes the callback under a different prop name, such as onSelect. Rename one to match.
Create React App's CORS Header Goes on the API, Not the App
Access-Control-Allow-Origin must come from the server answering the request. In dev, use CRA's proxy field; in production, a reverse proxy or API CORS.
React Hook Form: Fix Confirm Password Validation
A required confirmation field does not compare passwords. Add a validate callback and revalidate confirmation when the original password changes.
MUI DatePicker readonly in Cypress CI: fix the variant
Legacy MUI DatePicker can switch to a readonly mobile input in CI. Check pointer media, choose the intended variant, and update modern field selectors.
Fix Unsupported Server Component type: undefined
A Server Component cannot read a subcomponent attached to a client export. Import the subcomponent directly or compose it inside a client wrapper.
react-chartjs-2 fill property not working: register Filler
fill: true does nothing because tree-shaken Chart.js never registered the Filler plugin. Import Filler from chart.js and pass it to ChartJS.register().
Fix "changing an uncontrolled input to be controlled"
The input got value={undefined} on its first render, then a string. Start the state at an empty string, or pass value ?? an empty string.
React Hook useEffect has a missing dependency: the fix
exhaustive-deps warns when an effect calls a function that reads props or state. Move it into the effect or wrap it in useCallback; do not disable it.
Fix: error while hydrating, root switched to client render
Usually invalid HTML nesting (a <head> or <p> inside the wrong parent). Fix the nesting that throws during hydration.
Fix Vite React error #130: react-multi-carousel
A Vite build can import react-multi-carousel as an object. Inspect its default property, select the component and verify the built output locally.
Routing & params
16 itemsNext.js Pages to App Router Migration Gotchas
Migrating Pages Router to App Router? Avoid cookies timing bugs, router.events removal, metadata conflicts, and auth middleware breaks.
Next.js Redirect from / to another page
Fix Next.js redirect from `/` to another page with the correct API for the job: `redirect()`, `useRouter().push()`, or `redirects()` in `next.config.js`.
Next.js Query String Params: searchParams + useRouter
Read query strings with await searchParams in the App Router or router.query in Pages Router — and narrow the string | string[] | undefined type safely.
How to Access Route Parameter Inside getServerSideProps
Fix undefined route parameter errors in getServerSideProps by correctly accessing context.params instead of context.query or req.query.
Fix: Next.js proxy.js matcher not working for static assets
After migrating from middleware.ts to proxy.ts in Next.js 16, your CSS, images, and Server Function auth can silently break.
Cross-Origin-Opener-Policy Blocks window.closed: 2026 Fix
Firebase Google popup auth hangs when Cross-Origin-Opener-Policy blocks window.closed. Fix it with one COOP header change in next.config.js or vercel.json.
Next.js: Error: only absolute urls are supported (fix)
Server-side fetch has no origin, so a relative URL such as /api/products throws. Read the data directly on the server or build an absolute URL.
Fix: A Route is only ever to be used as the child of Routes
React Router v6 and v7 throw this when a <Route> sits outside <Routes>. Wrap the routes in <Routes> and move each page onto the element prop.
Fix Next.js Global CSS cannot be imported: Pages Router
Global Sass imported by a Pages Router component fails. Move it to pages/_app, forward pageProps, or convert component styles to CSS Modules.
Next.js app/api 404 vs 405: route.js and named exports
A file like app/api/admin/all.js is ignored (404); a route.js with export default gets 405. Use all/route.js and export GET.
Next.js favicon not working: app/favicon.ico vs public/
The App Router template ships app/favicon.ico, which competes with your public/favicon.ico for the same URL. Keep one icon: replace or delete it.
Access to fetch at accounts.google.com blocked by CORS: fix
fetch() followed your server's redirect to Google OAuth, which sends no CORS headers. Navigate the tab to the login route instead of fetching it.
Fix Error: NEXT_REDIRECT logged in a Route Handler catch
NEXT_REDIRECT is an error thrown on purpose; a catch in app/api route.ts logs it and breaks the response. Return NextResponse or use unstable_rethrow.
Next.js 'URL is malformed' error: use only absolute URLs
validateURL in middleware or proxy.ts rejects a bare /about. Pass request.nextUrl.clone() or new URL(path, request.url), then fix the matcher.
Fix Invariant: attempted to hard navigate to the same URL
Pages Router throws this when a navigation to the current URL fails and it will not reload. Upgrade past 13.1 for 404 pages; catch router.push, reload.
Fix: useRouter query undefined on first render
router.query is {} on the first render of a statically optimized Pages Router page. Wait for router.isReady before you read it.
Images & Core Web Vitals
4 itemsFix next/image Hostname Not Configured in Next.js
"hostname is not configured under images" means next/image is blocking a remote image host you didn't allow-list.
How to set the next/image component to 100% height
Complete guide to how to set the next/image component to 100% height. Covers root causes, diagnostic steps, and working code fixes.
Next.js Images Not Loading from public/static Folder: Fix
public/ is served from the site root, so /public/logo.png returns 404. Drop the prefix, give next/image a size or an import, prefix basePath if set.
How to implement LCP end to end
Step‑by‑step guide to measure and optimise Largest Contentful Paint in a Next.js app, from instrumentation to reporting.
Other hubs
Next.js + Supabase: The Complete Resource Hub
Everything you need to build production-ready full-stack apps with Next.js 15 and Supabase — authentication, RLS, deployments, performance, and architecture decisions.
Supabase Debugging & Troubleshooting Hub
Field-tested fixes for the Supabase errors that actually waste your time: RLS silent failures, session persistence, slow queries, realtime gotchas, and auth redirects.
n8n Automation: Real Workflows from Real Projects
Practical n8n automation guides built from actual client work — CRM lead capture, client reporting, Zapier migration, silent failure debugging, and self-hosted AI with Ollama.
PostgreSQL in Production: Errors, Auth & Query Patterns
PostgreSQL error messages and query patterns you hit running Postgres in production — whether you connect through psql directly or through Supabase, the underlying database is the same.
TypeScript Type Errors: Fixes for Next.js Developers
The TypeScript compiler errors (TS2322, TS2305, TS7016, TS2564 and friends) you actually hit building Next.js apps, with the fix and the type-system reasoning behind it.