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

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'
  })
);

Packages

Package	Version	Changelog
next-plugin-qrcode	0.1.0	Changelog

Development

Commands for maintainers:

pnpm install
pnpm build
pnpm playground

License

MIT