Add an optional devQR configuration to display a QR code for the development server (local or network)

[jay-herrera]

Goals

1. Improve mobile testing workflow: allow developers to instantly open the running dev server on a phone or tablet by scanning a QR code.
   2.Reduce boilerplate: eliminate custom shell scripts that manually compute IP addresses, find ports, and generate QR codes.
2. Enhance DX consistency: make Next.js’s built-in dev output more informative and ergonomic out-of-the-box.

Non-Goals

1. It does not modify certificate handling or HTTPS configuration
2. It does not introduce new CLI flags or runtime prompts
3. It does not attempt to manage multiple network interfaces or tunneling services (e.g., ngrok)

Background

Today, developers may create shell scripts that:

• Detect the machine’s LAN IP (ifconfig, os.networkInterfaces()).
• Find a free port.
• Start next dev.
• Generate a QR code using tools like qrcode-terminal.

This is common across teams building responsive or mobile-first web apps.
It’s especially useful when testing PWAs, service workers, push notifications, or local HTTPS flows from physical devices.

However, this functionality is external to Next.js — every developer reinvents it.
By baking this into next dev, Next.js can offer a polished and consistent developer experience similar to frameworks like Expo or Vite (with plugins), which already display QR codes for local previews.

Proposal

Add an optional field in next.config.js:

// next.config.js
module.exports = {
  devQR: 'network' // 'local' | 'network' | undefined
}

Default: undefined → no QR code displayed.
Options:

'local' → QR code for https://localhost:

'network' → QR code for the LAN IP (e.g., https://10.0.0.207:)

Behaviour

When running next dev, the output could look like this:

▲ Next.js 16.0.1 (Turbopack)
- Local:    https://localhost:3000
- Network:  https://10.0.0.207:3000

[ASCII QR code here]

• The QR code is only shown in interactive terminals (process.stdout.isTTY true).
• It appears after the “ready” message when URLs are printed.
• If devQR is not set, no additional output appears (fully backward-compatible).

#Implementation Notes

• Use a lightweight dependency such as qrcode-terminal or equivalent inline implementation.
• Lazy-load the QR module only when devQR is defined.
• Ensure compatibility with Turbopack and Webpack dev servers.
• Keep zero runtime overhead when disabled.

#Benefits
✅ Faster mobile testing workflow
✅ No more custom scripts or npm dependencies
✅ Minimal terminal clutter
✅ Works across platforms (macOS, Windows, Linux)
✅ Aligns with Next.js’s goal of world-class DX

#Are you interested in contributing?
Yes — I would be happy to contribute the implementation and documentation for this feature following the team’s guidance.

[simoncdn]

Hello!
Great timing! Just yesterday, I reinvented the wheel once again by developing an npm package that generates a QR code using Webpack hooks: next-plugin-qrcode

This aligns perfectly with the proposal, and I'd be happy to volunteer to help with this task as well if you're interested.