Create a Restaurant QR Code Menu in Next.js

Emmanuel Ugwu

QR Codes (Quick Response code) gained popularity due to their quick readability and larger storage capacity compared to traditional UPC (Universal Product Code) barcodes. For almost 30 years, QR codes have been utilized in commerce, technology, and industrial sectors.

A QR code is a barcode that stores information as a series of pixels in a square-shaped grid and can be scanned by a digital device. QR codes are widely used to track information about products in a supply chain, and they are utilized frequently in marketing and advertising efforts.

This article briefly discusses the application of QR code technology in building a restaurant QR code menu.

Codesandbox and Github

The completed project is on CodeSandbox. Fork it to get started quickly.

1<Codesandbox id="modest-northcutt-4069ql" title="Create a restaurant QR code menu in Next.js" />

The source code is on Github.

Prerequisite

Adequate knowledge of JavaScript and React.js is required for this article. The knowledge of Next.js is preferred but not required.

Getting Started with Next.js

Next.js is a React-based framework with functionalities like pre-rendering, automatic code-splitting for faster page loads, and API routes to build API endpoints with serverless functions for back-end features.

Created by Vercel, Next.js is open source and based on Node.js and Babel— and also integrates with React to create single-page apps.

Project setup and installation

To create a new project, run the following command in our terminal:

1npx create-next-app <project-name>

Next, navigate into the project directory and install the qrcode.react package with the command below:

1cd <project-name> && npm install qrcode.react

Running npm run dev will start the development server by default at http://localhost:3000 in our browser.

What is qrcode.react?

qrcode.react is a flexible, high-performance component for displaying typical 1D and 2D QR codes in React applications. It is practical and does not require the usage of typefaces. The generated QR codes are suited for printing and on-screen scanning.

qrcode.react is fully customizable, as it provides options to customize its color, height, width, and more. It can display different QR code forms such as SVGs and canvas. It uses a set of default option values to display a QR code.

Building the QR code component

With the project fully set up and configured, we can start building the QR code menu.

Import the QR code component from qrcode.react to create a QR code from the input value. Then, add the following code.

1// ./pages/index.js
2
3 import React, { useState, useRef } from "react";
4 import { QRCodeSVG } from "qrcode.react";
5 export default function Home() {
6 const qrcodeRef = useRef(null);
7 const [qrcode, setQrcode] = useState("");
8 const handleChange = (event) => {
9 setQrcode(event.target.value ? event.target.value : "");
10 };
11 return (
12 <div className="App">
13 <h1 className="title">Restaurant qr code Menu</h1>
14 <input type="text" placeholder="type here" onChange={handleChange} />
15 </div>
16 );
17 }

The code block above does the following:

  • Creates an input element and a state variable called qrcode in ./pages/index.js.
  • The input accepts the restaurant’s URL, which will be transformed into a QR code and stored in the qrcode state variable.
  • The input will also trigger an event to update the qrcode value as the input value changes.

Next, we'll add the QR code component, which utilizes some options to display the QR code. The QR code component allows inline style or custom className to customize the rendering.

1<QRCodeSVG value={qrcode} size="250" fgColor="#000" ref={qrcodeRef} />

The options in the code snippet above do the following:

  • value - This holds the input value converted to a QR code.
  • size - Sets the default value of the QR code’s width and height to 250px.
  • fgColor - The foreground color of the QR code.
  • ref - To access the QRCodeSVG element after being mounted to the DOM.

The QR code menu should look like this in our browser:

Testing the QR code menu

We’ll transform a random restaurant’s URL into a QR code to ensure the QR code menu is fully functional.

To do this, scan the QR code with the help of any QR code scanner application on our computer system or phone. The QR code scanner will show the same URL like the one in the QR code menu above to show the application is fully functional.

Conclusion

This article discussed how to transform URLs into QR codes and, more importantly, integrate QR codes into web applications.

Resources

Emmanuel Ugwu

Software Engineering | Technical Writing | Web Development

I am a software engineer who is passionate about REST API's and building fast and scalable applications. I also write articles and other technical content to guide developers in the tech community.