Building a Barcode Scanner & Generator in Next.js

Idea

Building a barcode app seemed simple at first, but mobile cameras and long barcodes made it a real challenge. I'll share the libraries and solutions that worked perfectly for me after hours of research.

Introduction

I recently had a requirement from a client to build a barcode generator and scanner application that could run on both desktop and mobile browsers.

At first, it looked simple — but when I started researching, I found that there are many libraries available for barcode scanning and barcode generation. Some worked well in certain cases, while others had limitations, especially around camera access and rendering accuracy.

I spent 5–6 hours researching and testing different libraries, and finally found a stack that worked perfectly for my use case. In this blog post, I’ll walk you through:

• The problem I faced
• The libraries I tested
• The solutions that worked
• And finally, how you can set this up easily in your own Next.js project.

---

The Problem

My first thought was to generate a 16–24 digit alphanumeric barcode and then scan it using the webcam or mobile camera.

But very soon, I realized that:

• Mobile cameras and low-resolution webcams had trouble scanning long barcodes.
• A 16 or 24 digit barcode often failed to scan properly.

I needed something more reliable and lightweight.

So, I shifted to generating 8-digit alphanumeric barcodes instead. This change made the scanning process much smoother and reliable across different devices.

---

The Research

While exploring, I came across many libraries and SDKs. Here’s what I tested and found useful:

Barcode Generation

• react-barcode → free, simple, and renders clean barcodes directly in React.
• Other alternatives I looked at included SVG and Canvas-based generators, but react-barcode was the most straightforward.

Barcode / QR Code Scanning

• html5-qrcode → works with both desktop webcams and mobile cameras, free and easy to integrate.
• Alternatives I found:
  • QuaggaJS → a well-known open-source scanner.
  • Zxing-js → another option for scanning.
• Paid SDKs also exist (like Dynamsoft or Scandit), but since my project needed a free solution, I stuck with html5-qrcode.

---

What Worked for Me

After testing, here’s the final solution that worked perfectly:

Generator:

• Used react-barcode to generate clean barcodes.
• Limited barcodes to 8-digit alphanumeric codes for reliability.
• Used html2canvas to allow users to download barcodes as PNG.

Scanner:

• Used html5-qrcode to access cameras and scan barcodes.
• Added support for camera switching (front/rear).
• Made it responsive so users could scan via desktop or mobile.

UI & Layout:

• Built in Next.js (13+) using use client components.
• Styled using TailwindCSS for a clean, responsive interface.
• On desktop, the scanner and generator appear side by side.
• On mobile, they stack vertically for usability.

---

Features

• Camera-based Scanner → Select front/rear camera, start/stop scanning.
• Random Code Generator → Secure 8-digit alphanumeric codes.
• Barcode Download → Save barcodes as PNG images.
• Responsive Layout → Works across mobile and desktop.
• Clean UI → Built with TailwindCSS.

---

How to Use

Open the app in your browser. Use the scanner to scan barcodes/QR codes with your camera. Use the generator to create barcodes and download them. Works on both desktop and mobile devices.

---

Get the Full Code

You can check out the full implementation and download the project here: 👉 GitHub Repository – Barcode Scanner & Generator App