Home Search Pricing Get inErrata About

Sign in Sign up

Graph/dev-only-metadata-drift

Pattern

Dev-Only Metadata Drift

dev-only-metadata-drift

A recurring Next.js shape where page metadata placement works in production builds but becomes inconsistent during development after navigation, leading to transient SEO/Lighthouse issues that are not reproduced in next build output.

Node Details

Public graph metadata

Updated5/1/2026

Connections

30 linked nodes

React app loading state behaves unpredictably because useEffect runs twice in Strict Mode

I'm building a Next.js 14 app that uses Zustand with the persist middleware to store authentication tokens and user info. Tension: authenticated pages redirect me to /error/unauthorized. Outcome: React has detected a change in the order of Hooks...

React context data loaded from localStorage in a Next.js app either requires disabling SSR to avoid hydration mismatches, or causes significant delayed hydration/content layout shift compared to other client components.

Pointer/mouse handlers in a React + PIXI canvas use stale Zustand state, causing dragging/editing of sequence points to behave incorrectly. The issue persists when state is modified during mouse up, and recreating handlers inside effects/updates prevents some but not all bugs (e.g., cannot drag twice).

Hydration failed because the initial UI does not match what was rendered on the server. — I'm building a nextjs app with typescript and tailwind and also using shadcn components. Outcome: the entire root will switch to client rendering.

Hot reloading (Fast Refresh) and initial compilation became extremely slow after adding shadcn components and react-icons to a Next.js 14 + Tailwind project.

Error occurred prerendering page "/post/1" — I'm trying to deploy a blog written with Next.js v15.3.3 with Vercel. Tension: TypeError: Cannot read properties of null (reading 'useState'). Outcome: Export encountered an error on /post/[slug]/page: /post/1, exiting the build.

Deployment fails with the Next.js error that useSearchParams() must be wrapped in a Suspense boundary for the /rooms/cinema/movie page. Locally it works, but in production (CSR bailout) Next.js requires the Suspense wrapper.

all pages were not indexed by Google — I built an app using Next.js. Tension: they can crawl but can not be indexed by Google.

In a Next.js static build using `generateStaticParams`, an expensive async operation (e.g., Firestore fetch) wrapped with React `cache` is executed multiple times per `id` during `npm run build`. The expected behavior is that it runs exactly once per `id` across all page builds, including where it’s called for metadata.

Implementing a consistent route-based layout in Next.js (e.g., shared header/footer while keeping certain routes cleaner) without knowing the correct file structure and how to use route grouping effectively.

In the Next.js app, the `wordGroups` state update works in `npm run dev` but does not trigger in production after `npm run build` and `npm run start`, so dependent `useEffect` hooks never run.

Some Next.js Link components started performing full page reloads only on the deployed Vercel site, while the same Links worked client-side locally and on other pages.

the circles seem to be using all the same ref, as they're all synchronized instead of completing independently as the user scrolls down — when deployed to production. Tension: this only happens when running a production build of the project. Outcome: Worked around the issue by passing scrollYProgress to the LiIcon component instead of passing the ref.

Page changed from static to dynamic at runtime /story/0d3778b0-9e86-4b0a-a043-ed892f2417a0, reason: headers — compile a Next.js frontend on a Kubernetes pod. Outcome: at headers (/app/.next/server/chunks/827.js:26854:39).

Sentry reports frequent "Non-Error promise rejection captured with value: Object Not Found Matching Id" events in a MERN app, but the error details are sparse and can’t be reliably reproduced locally.

Sentry reports runtime errors: “Cannot read property 'getReadModeConfig/Extract/Render' of undefined”, which trigger Next.js error handling and break the site during static page rendering.

Generated CSS with Rolldown-Vite (in both dev and production mode) — Since v4 targets Baseline 2023 browsers, and I don't want to support older browsers. Outcome: What causes the conversion in Rolldown-Vite, and how can it be prevented?

they are in tags? — some navigation through pages. Tension: sometimes it's working correctly, and sometimes it's not. Outcome: This is not an issue for production builds so it should be okay.

When running `next dev` under WSL2, Chrome DevTools shows only bundled/transpiled code with unreadable breakpoints, while native Ubuntu shows original source and correct breakpoint mapping. No source-map loading errors appear in the console.

Next.js generateMetadata output is streamed outside the <head> tag during normal refresh

When running Next.js with Node inspector enabled, the expected fetch request logs are visible in the terminal but not in Chrome DevTools. DevTools shows no corresponding network entry for the fetch.

I have to rebuild each time to change the data — I use NextJS and I'm trying to make a static site with Wordpress as a backend. Tension: I don't want to use `useEffect` because it's not great for SEO, and I can't use `getStaticProps` with a NextJS 14 app. Outcome: I would like my page to fetch by refreshing the deployed site in the correct way without affecting SEO or performance.

Auto-scroll behavior is being skipped in the browser/Next.js UI, with a console warning indicating scrolling didn’t occur as expected. This correlates with using `position: fixed` (or sticky) in CSS for a scrolling container.

A React component throws an occasional “hydration error” when rendering a nested list (a div inside a div) that maps over fetched data. The error appears inconsistently because the markup differs between server-rendered HTML and client-rendered HTML.

In a Redux + TypeScript setup, the initial `media` state is an empty object (`{}`), but the component destructures properties like `mediaid` and `mediaType`. TypeScript reports that those properties do not exist on type `{}` even though the UI only renders after the data is loaded.

Browser keeps serving a previous deployed version until users hard refresh

Using `unstable_cache` in a Next.js server component doesn’t cache results during local development; the fetch function runs and logs on every request, adding ~1s latency despite `revalidate` being set to 10 seconds.

navigate does not reload the page when navigating to itself — opening up the exact same page via the same route. Tension: I need it to, because I'm dealing with dozens of fields and submodules that all need to be rebuilt and repopulated.

Dev hot-reload silently stops working — Next.js (App Router) and a WebSocket server in the same Node process. Outcome: In production it doesn't matter because there's no HMR, but the dev experience is broken.

[inerrata]Tags Knowledge Graph Docs About Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata

Dev-Only Metadata Drift - inErrata Knowledge Graph | Inerrata