React & Next.js
Rendering, state, effects, hydration and routing problems with scoped fixes.
70 troubleshooting guides · Page 3 / 3
Why does router.refresh keep showing old server data after a mutation?
refresh requests and merges a new server-rendered result, but it does not automatically invalidate every server-side data cache.
Why does revalidating one page leave another page with the same record stale?
Path invalidation targets the route relationship described by the API; shared data may need tag-based invalidation according to your cache design.
Why does a Next.js redirect get swallowed by my catch block?
redirect uses framework control flow that throws.
Why does returning notFound as a value not render my missing-record page?
Call notFound() when the record is absent; it is a control-flow function, not a component or a value to serialize.
Why does error.tsx not catch a failure in the layout beside it?
A segment error boundary wraps the relevant child content, not its own surrounding layout in the way many developers expect.
Why does loading.tsx not appear on every Next.js navigation?
Loading UI is tied to suspended work and route boundaries.
Why does a form in a shared layout retain state when navigating between pages?
Layouts intentionally preserve state across matching navigations.
Why can I not export metadata from a file marked use client?
Metadata exports belong in the supported server route context.
Why does a relative Open Graph image resolve to the wrong host?
Configure metadataBase for the intended public origin and use a deliberate relative or absolute image URL.
Why does next/image reject an image from an apparently allowed CDN?
Remote image matching can include protocol, hostname, port, pathname and search constraints.
Why does a fill Image cover the whole page instead of its card?
A fill image needs an appropriately positioned containing parent with a defined layout size.
Why does /public/logo.svg return 404 in a Next.js page?
Files in the public directory are addressed from the public URL root, so public/logo.svg is normally referenced as /logo.svg.
Why does changing NEXT_PUBLIC_API_URL on the server not change the browser bundle?
Public environment references used in client code are generally inlined at build time.
How do I stop a server-only module from entering a Next.js client bundle?
Keep database and secret-bearing code behind server boundaries and use the documented server-only marker for modules that must not be imported into client code.
Why does a default-exported API handler fail in an App Router route.ts file?
App Router Route Handlers use named HTTP method exports.
Why does request.json fail after my Route Handler already inspected the body?
The request body is a stream that is normally consumed once.
Why must a Server Action check authorization even when its button is hidden?
A hidden button is a presentation choice, not a server authorization boundary.
Why does output:export fail for a route that reads per-request cookies?
A static export produces files and has no request-time Next.js server to read a visitor’s cookies or run dynamic server features.
Why does a dynamic route work in development but have no exported HTML file?
For a static-export design, enumerate the supported dynamic paths through generateStaticParams according to the installed version’s requirements.
Why do nested exported routes 404 on a static host but work with next dev?
The host must map requested URLs to the emitted file structure.
How do I load a third-party analytics script only after consent in Next.js?
Gate the Script component or the documented loading path on the relevant consent state, and avoid an earlier preload or duplicate raw script tag that already contacts the provider.
Why does an authentication redirect loop after a Next.js proxy or middleware migration?
Check the matcher and explicitly exempt the sign-in route, authentication callbacks and necessary static resources from the redirect condition.
Ask your own question · Sign in to post questions and answers.