Guide 14 min read March 25, 2026

Create QR Code Generator in NextJS (Server Components + App Router + PNG Download)

Learn how to build a fast and SEO-friendly QR Code Generator in NextJS using Server Components and Client Components. Includes live preview, color customization, dynamic sizing, and PNG download.

QR codes are widely used in modern applications for payments, authentication, sharing links, WiFi access, event tickets, product packaging, and marketing campaigns. In this tutorial, you will build a complete QR Code Generator using NextJS App Router architecture. The tool will allow users to enter any text or URL, customize QR size and colors, preview changes instantly, and download the generated QR code as a PNG image.

Unlike traditional React applications, NextJS enables hybrid rendering with Server Components and Client Components. This improves performance, reduces JavaScript bundle size, and enhances SEO — making it ideal for tool websites and utility platforms.

What You Will Build

Instant QR code generation while typing
Foreground and background color customization
Adjustable QR size input
One-click PNG download feature
Modern architecture using Server and Client Components
SEO-friendly tool page structure
Optimized rendering for faster page load

Prerequisites

Basic knowledge of React or NextJS
Node.js installed on your system
Understanding of functional components and hooks
Basic knowledge of SVG and Canvas is helpful but optional

Step 1: Create a New NextJS App

Create a new NextJS project using the official CLI. Make sure to select App Router during setup.

bash

npx create-next-app@latest nextjs-qr-generator
cd nextjs-qr-generator
npm run dev

After running the development server, open http://localhost:3000 to verify your application is working.

Step 2: Install QR Code Library

Install a lightweight library that generates QR codes as SVG.

bash

npm install react-qr-code

react-qr-code converts text or URLs into QR SVG instantly
SVG output makes it easy to export to PNG or download as vector

Step 3: Project Folder Structure

txt

app/
 page.tsx
components/
 QRGenerator.tsx

Keeping UI logic inside reusable components helps maintain scalability when building multiple QR tools.

Step 4: Build QRGenerator Client Component

Since the generator requires browser APIs like Canvas, Image, and event handlers, it must be implemented as a Client Component.

tsx

"use client";

import { useState, useRef } from "react";
import QRCode from "react-qr-code";

export default function QRGenerator() {
 const [text, setText] = useState("https://example.com");
 const [size, setSize] = useState(240);
 const [fgColor, setFgColor] = useState("#000000");
 const [bgColor, setBgColor] = useState("#ffffff");

 const qrRef = useRef<HTMLDivElement>(null);

 const downloadQR = () => {
 const svg = qrRef.current?.querySelector("svg");
 if (!svg) return;

 const svgData = new XMLSerializer().serializeToString(svg);
 const canvas = document.createElement("canvas");
 const ctx = canvas.getContext("2d");

 const img = new Image();
 img.onload = () => {
 canvas.width = size;
 canvas.height = size;
 ctx?.drawImage(img, 0, 0);

 const pngFile = canvas.toDataURL("image/png");
 const link = document.createElement("a");
 link.download = "qr-nextjs.png";
 link.href = pngFile;
 link.click();
 };

 img.src = "data:image/svg+xml;base64," + btoa(svgData);
 };

 return (
 <div style={{ textAlign: "center" }}>
 <h2>NextJS QR Code Generator</h2>

 <input
 value={text}
 onChange={(e) => setText(e.target.value)}
 placeholder="Enter URL or Text"
 style={{ padding: 10, width: 320 }}
 />

 <div style={{ marginTop: 10 }}>
 <label>Size: </label>
 <input
 type="number"
 value={size}
 onChange={(e) => setSize(Number(e.target.value))}
 />
 </div>

 <div style={{ marginTop: 10 }}>
 <label>Foreground: </label>
 <input
 type="color"
 value={fgColor}
 onChange={(e) => setFgColor(e.target.value)}
 />
 </div>

 <div style={{ marginTop: 10 }}>
 <label>Background: </label>
 <input
 type="color"
 value={bgColor}
 onChange={(e) => setBgColor(e.target.value)}
 />
 </div>

 <div ref={qrRef} style={{ background: bgColor, padding: 20, display: "inline-block", marginTop: 20 }}>
 <QRCode value={text} size={size} fgColor={fgColor} bgColor={bgColor} />
 </div>

 <br />

 <button onClick={downloadQR} style={{ marginTop: 20, padding: "10px 20px", cursor: "pointer" }}>
 Download QR
 </button>
 </div>
 );
}

Step 5: Render Client Component inside Server Page

NextJS pages are Server Components by default. Import your generator component inside the page.

tsx

import QRGenerator from "@/components/QRGenerator";

export default function Page() {
 return (
 <main style={{ marginTop: 60 }}>
 <QRGenerator />
 </main>
 );
}

Understanding Server vs Client Components

Server Components render on the server and send HTML to the browser. This reduces JavaScript bundle size and improves page performance. Client Components handle interactivity such as form input, state management, animations, and browser APIs.

Use Server Components for layout, SEO content, and data fetching
Use Client Components for interactive tools
This separation improves maintainability and performance

How PNG Export Works

The QR code library generates SVG markup. The browser serializes this SVG using XMLSerializer. Then an Image object loads the encoded SVG. Canvas draws the image and exports PNG data using toDataURL. Finally, a temporary anchor element triggers the file download.