Show QR code on Next.js dev server start.
Works with both webpack and Turbopack — the QR code is printed when your Next.js config is evaluated, so no bundler integration is needed.
Docs & demo: https://next-plugin-qrcode.vercel.app
Inspired by vite-plugin-qrcode for Vite.
npm install --save-dev next-plugin-qrcodeWrap your config in next.config.ts with withQRCode:
import type { NextConfig } from "next";
import { withQRCode } from "next-plugin-qrcode";
const nextConfig: NextConfig = {
// your Next.js config
};
export default withQRCode(nextConfig);Start your dev server:
npm run dev
You can pass options as a second argument. Everything below is optional — the commented-out lines show the non-default options, so this block is safe to copy-paste as-is:
export default withQRCode(nextConfig, {
// port: 3000, // custom port (default: the actual dev server port, auto-detected)
// path: '/admin', // custom path, always wins over nextConfig.basePath when set (default: nextConfig.basePath, or '' if that's also unset)
// host: '10.0.0.9', // bare hostname or IP instead of the auto-detected local IP, no protocol prefix (default: auto-detected)
// https: true, // print the URL with https:// instead of http://; the port is still always appended (default: false)
// enabled: !process.env.CI, // set to false to fully disable the plugin, skipping option validation entirely (default: true)
});
pathdefaults to your Next.js config'sbasePathwhen set, so apps that already configurebasePathdon't need to repeat it here. Passingpathexplicitly always takes priority overbasePath.
export default withQRCode(nextConfig, {
port: 3001,
path: '/admin'
});export default withQRCode(nextConfig, {
host: '10.0.0.9',
https: true
});| Package | Version | Changelog |
|---|---|---|
| next-plugin-qrcode | 0.3.0 | Changelog |
Commands for maintainers:
pnpm install
pnpm build
pnpm playground