Next.js makes it easy to reach next dev from another device, but a few things still break on a phone: firewalls, the allowedDevOrigins check, and API or auth URLs hard-coded to localhost.

Step 1: Get the network URL

Recent versions of next dev listen on all network interfaces and print both addresses when they start:

   ▲ Next.js
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.14:3000

If you don't see a Network line, or your phone can't connect, bind explicitly:

npm run dev -- -H 0.0.0.0

To make it permanent, set the script in package.json to "dev": "next dev -H 0.0.0.0". Add -p 3001 to change the port.

Step 2: Open it on your phone

Connect your phone to the same Wi-Fi and open the Network URL in its browser. If Next.js didn't print one, find your IP with ipconfig (Windows) or ipconfig getifaddr en0 (Mac) and use http://YOUR-IP:3000.

Skip the IP hunt

DevMirror finds your Next.js server on ports 3000–3002 on your Wi-Fi and opens it on your Android phone in one tap.

Get DevMirror

Step 3: Fix "Cross origin request detected" (allowedDevOrigins)

When you open the dev server from an address other than localhost, Next.js treats it as a different origin and logs a warning like Cross origin request detected from 192.168.1.14 to /_next/* resource. Depending on your Next.js version this is only a warning, or the requests are blocked. Blocked requests show up as a page that renders but doesn't respond to taps and doesn't hot reload.

Allow your IP in next.config.js and restart the dev server:

// next.config.js
module.exports = {
  allowedDevOrigins: ['192.168.1.14'],
}

For next.config.ts, add the same allowedDevOrigins key to your nextConfig object. This setting only affects development.

More fixes

Your firewall is blocking it

This is the most common cause. The first time Node.js accepts a network connection, Windows asks whether to allow it. If you dismissed that prompt, the connection is silently blocked. To fix it, open Windows Security → Firewall & network protection → Allow an app through firewall, find Node.js, and tick Private. Also check that your Wi-Fi is set to a Private network, not Public.

On macOS, if the firewall is on, go to System Settings → Network → Firewall → Options and allow incoming connections for Node.js.

Your phone and computer aren't really on the same network

Guest networks, public Wi-Fi and many office networks use client isolation, which stops devices from talking to each other. Some routers also separate their 2.4 GHz and 5 GHz networks. If you can't change the network, turn on your phone's hotspot and connect your computer to it. That works every time. A VPN on your computer can also block local traffic, so pause it while testing.

API calls or login fail on the phone

Environment variables like NEXT_PUBLIC_API_URL=http://localhost:4000 point the phone at itself. Use relative routes (/api/…) where you can, or set the URL to your computer's IP while testing. Auth libraries have the same problem. If NEXTAUTH_URL (or your provider's callback URL) is http://localhost:3000, sign-in will redirect the phone to localhost and fail.

Wi-Fi won't cooperate? Use USB (Android)

With USB debugging enabled and Android platform-tools installed, forward the port over the cable:

adb reverse tcp:3000 tcp:3000

Now http://localhost:3000 on the phone reaches your computer. In DevMirror, enter 127.0.0.1 and port 3000. No Wi-Fi involved.

How to test your Next.js app on your phone