Link to the code that reproduces this issue
https://github.com/gpalavecino-gotoxy/nextjs-allowed-dev-origins-hydration-repro
To Reproduce
npx create-next-app@latest (App Router, TypeScript, default options)
- Add
allowedDevOrigins: ["127.0.0.1"] to next.config.ts — nothing else changed from the scaffold
npm run dev
- Open
http://127.0.0.1:3000/ (the exact origin listed in allowedDevOrigins)
- Open the browser console
Current vs. Expected behavior
Expected: clean hydration, no console errors.
Actual: React throws a hydration-mismatch error on (almost) every fresh full-page load:
Error: Hydration failed because the server rendered HTML didn't match the client.
...
<MetadataWrapper>
<div
+ hidden={true}
- hidden={null}
- style={{display:"contents"}}
>
<__next_metadata_boundary__>
+ <Suspense name="Next.Metadata">
Removing allowedDevOrigins from next.config.ts (with everything else identical) makes the mismatch disappear consistently across many reloads. Re-adding it brings it back. This is the only variable I changed — see the linked repo's README for the isolation steps (also ruled out custom fonts and Tailwind config in a larger app before narrowing it down to this one option).
In a larger real-world app on the same Next.js version, the SSR-to-CSR remount this mismatch forces was observed to occasionally swallow the first click on an interactive element (e.g. a form's submit button silently doing nothing) because the DOM subtree gets torn down and rebuilt while the click event is in flight — happy to add more detail on that if useful, but the attached repro isolates the hydration error itself.
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 11 Pro
Binaries:
Node: 24.4.0
npm: 11.4.2
Relevant Packages:
next: 16.3.5 (also reproduced on 16.2.6)
react: 19.2.8
react-dom: 19.2.8
typescript: 5.9.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Navigation, Runtime
Which stage(s) are affected?
next dev (local)
Additional context
allowedDevOrigins is the documented workaround for a Windows-specific dev annoyance where localhost intermittently resolves to ::1 while the Turbopack dev server only listens on IPv4, making http://localhost:3000 fail to load and 127.0.0.1 the only reachable origin. Turning on the workaround to fix that connectivity problem introduces this hydration mismatch as a side effect.
Link to the code that reproduces this issue
https://github.com/gpalavecino-gotoxy/nextjs-allowed-dev-origins-hydration-repro
To Reproduce
npx create-next-app@latest(App Router, TypeScript, default options)allowedDevOrigins: ["127.0.0.1"]tonext.config.ts— nothing else changed from the scaffoldnpm run devhttp://127.0.0.1:3000/(the exact origin listed inallowedDevOrigins)Current vs. Expected behavior
Expected: clean hydration, no console errors.
Actual: React throws a hydration-mismatch error on (almost) every fresh full-page load:
Removing
allowedDevOriginsfromnext.config.ts(with everything else identical) makes the mismatch disappear consistently across many reloads. Re-adding it brings it back. This is the only variable I changed — see the linked repo's README for the isolation steps (also ruled out custom fonts and Tailwind config in a larger app before narrowing it down to this one option).In a larger real-world app on the same Next.js version, the SSR-to-CSR remount this mismatch forces was observed to occasionally swallow the first click on an interactive element (e.g. a form's submit button silently doing nothing) because the DOM subtree gets torn down and rebuilt while the click event is in flight — happy to add more detail on that if useful, but the attached repro isolates the hydration error itself.
Provide environment information
Which area(s) are affected? (Select all that apply)
Navigation, Runtime
Which stage(s) are affected?
next dev (local)
Additional context
allowedDevOriginsis the documented workaround for a Windows-specific dev annoyance wherelocalhostintermittently resolves to::1while the Turbopack dev server only listens on IPv4, makinghttp://localhost:3000fail to load and127.0.0.1the only reachable origin. Turning on the workaround to fix that connectivity problem introduces this hydration mismatch as a side effect.