Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

next-plugin-qrcode

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.

Installation

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

Usage

Wrap 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
Image

Configuration

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

path defaults to your Next.js config's basePath when set, so apps that already configure basePath don't need to repeat it here. Passing path explicitly always takes priority over basePath.

Example with custom path

export default withQRCode(nextConfig, {
  port: 3001,
  path: '/admin'
});

Example with host and https

export default withQRCode(nextConfig, {
  host: '10.0.0.9',
  https: true
});

Packages

Package Version Changelog
next-plugin-qrcode 0.3.0 Changelog

Development

Commands for maintainers:

pnpm install
pnpm build
pnpm playground

License

MIT

Releases

Packages

Contributors

Languages