allowedDevOrigins

allowedDevOrigins?: string[]

By default the development server only answers requests for dev-only assets and endpoints that come from the hostname it was initialized with — normally localhost. Everything else is blocked, so a stranger on your network cannot pull source maps or hit internal dev routes. allowedDevOrigins adds hostnames to that allowlist.

When to reach for it

Any time the browser is not on localhost. Testing on a phone via your machine's LAN address, exposing the dev server through a tunnel such as ngrok or Cloudflare Tunnel, running behind a local reverse proxy on a custom .dev hostname, or opening the app from inside a container or VM that reaches the host by IP.

What trips people up

• The symptom is confusing. The page itself may load while HMR silently stops working or dev assets 404, because it is the dev-only requests that get blocked.
• Entries are hostnames, not full URLs — no scheme, no path.
• A tunnel that mints a new subdomain per session needs the wildcard form, otherwise you edit the config every restart.
• This is development only. It has no effect on next build or next start, so it is not a substitute for CORS headers in production.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  allowedDevOrigins: ['local-origin.dev', '*.local-origin.dev'],
}

export default nextConfig

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  allowedDevOrigins: ['192.168.1.42'],
}

export default nextConfig

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  allowedDevOrigins: ['*.ngrok-free.app', '*.trycloudflare.com'],
}

export default nextConfig

import type { NextConfig } from 'next'

const devOrigins =
  process.env.NODE_ENV === 'development'
    ? ['*.local-origin.dev', '192.168.1.42']
    : []

const nextConfig: NextConfig = {
  allowedDevOrigins: devOrigins,
}

export default nextConfig