feat: ALLOWED_DEV_ORIGINS env for cross-origin dev mode#6
Conversation
Next.js 16 blocks cross-origin requests to /_next/* dev resources by
default. When the dev server runs behind a reverse proxy (or any host
that isn't localhost), HMR and dev chunk requests are blocked and
React fails to hydrate. The page renders the SSR HTML but client-side
JS never takes over, so forms submit natively instead of via React.
Symptom seen in container/proxy setups: clicking "Create account"
performs a native GET to /auth/sign-up?, never POSTs to
/api/auth/sign-up/email, and the user is never created.
Plumb a comma-separated ALLOWED_DEV_ORIGINS env var through to
NextConfig.allowedDevOrigins. Default stays empty (matches current
behavior for plain localhost dev).
Example:
ALLOWED_DEV_ORIGINS=bigset.example.com bun dev
See: https://nextjs.org/docs/app/api-reference/config/next-config-js/allowedDevOrigins
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Problem
Next.js 16 blocks cross-origin requests to
/_next/*dev resources by default. Whennext devruns behind a reverse proxy (or any non-localhost origin), HMR and the dev chunk loader get blocked, which silently breaks React hydration.Concrete failure mode: page loads, looks fine, but React never hydrates. The form on
/auth/sign-upsubmits natively as a GET to/auth/sign-up?(form action defaults to the page URL, inputs lacknameattributes so the URL has no query). No POST to/api/auth/sign-up/email, no user created, no visible error. Looks like the app is broken.This is the dev-mode log warning that appears server-side:
Fix
Plumb
ALLOWED_DEV_ORIGINS(comma-separated) throughNextConfig.allowedDevOrigins. Default stays empty so plainlocalhostdev is unchanged.Twelve added lines, zero behavior change for current users.
Ref: https://nextjs.org/docs/app/api-reference/config/next-config-js/allowedDevOrigins