next-plugin-qrcode

Show QR code on Next.js dev server start.

This plugin works with webpack only.

Inspired by vite-plugin-qrcode for Vite.

Installation

npm install --save-dev next-plugin-qrcode

Usage

Add the plugin to your next.config.ts:

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:

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.

Configuration

You can pass options to customize the behavior:

new QRCodePlugin({
  port: 3000,  // custom port (default: process.env.PORT or 3000)
  path: ''     // custom path (default: '')
})

Example with custom path

config.plugins.push(
  new QRCodePlugin({
    port: 3001,
    path: '/admin'
  })
);

License

MIT