Show QR code on Next.js dev server start
npm install next-plugin-qrcodeShow QR code on Next.js dev server start.
This plugin works with webpack only.
> Inspired by vite-plugin-qrcode for Vite.
``bash`
npm install --save-dev next-plugin-qrcode
Add the plugin to your next.config.ts:
`typescript
import type { NextConfig } from "next";
import { QRCodePlugin } from "next-plugin-qrcode";
const nextConfig: NextConfig = {
webpack: (config, { dev, isServer }) => {
// only applies in dev mode
if (dev && !isServer) {
config.plugins.push(new QRCodePlugin());
}
return config;
},
};
export default nextConfig;
`
Start your dev server:
`bash`
npm run dev
The QR code will be displayed in your terminal. Scan it with your mobile device to quickly access your Next.js app on the local network.
You can pass options to customize the behavior:
`typescript`
new QRCodePlugin({
port: 3000, // custom port (default: process.env.PORT or 3000)
path: '' // custom path (default: '')
})
`typescript``
config.plugins.push(
new QRCodePlugin({
port: 3001,
path: '/admin'
})
);