Skip to content

Create a Restaurant QR Code Menu in Next.js

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.

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

<Codesandbox id="modest-northcutt-4069ql" title="Create a restaurant QR code menu in Next.js" />
Code language: HTML, XML (xml)

The source code is on Github.

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

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.

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

    npx create-next-app <project-name>
Code language: HTML, XML (xml)

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

    cd <project-name> && npm install qrcode.react
Code language: HTML, XML (xml)

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

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.

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.

    // ./pages/index.js
    
    import React, { useState, useRef } from "react";
    import { QRCodeSVG } from "qrcode.react";
    export default function Home() {
      const qrcodeRef = useRef(null);
      const [qrcode, setQrcode] = useState("");
      const handleChange = (event) => {
        setQrcode(event.target.value ? event.target.value : "");
      };
      return (
        <div className="App">
          <h1 className="title">Restaurant qr code Menu</h1>
          <input type="text" placeholder="type here" onChange={handleChange} />
        </div>
      );
    }
Code language: JavaScript (javascript)

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.

 <QRCodeSVG value={qrcode} size="250" fgColor="#000" ref={qrcodeRef} />
Code language: HTML, XML (xml)

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:

image

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.

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

Back to top

Featured Post