{"id":28488,"date":"2022-05-05T08:40:13","date_gmt":"2022-05-05T15:40:13","guid":{"rendered":"http:\/\/create-a-restaurant-qr-code-menu-in-next.js."},"modified":"2023-04-20T12:59:00","modified_gmt":"2023-04-20T19:59:00","slug":"create-a-restaurant-qr-code-menu-in-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-restaurant-qr-code-menu-in-next-js\/","title":{"rendered":"Create a Restaurant QR Code Menu in Next.js"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

This article briefly discusses the application of QR code technology in building a restaurant QR code menu.<\/p>\n

Codesandbox and Github<\/h3>\n

The completed project is on CodeSandbox<\/a>. Fork it to get started quickly.<\/p>\n

<Codesandbox<\/span> id<\/span>=\"modest-northcutt-4069ql\"<\/span> title<\/span>=\"Create a restaurant QR code menu in Next.js\"<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Prerequisite<\/h3>\n
Adequate knowledge of JavaScript and React.js is required for this article. The knowledge of Next.js is preferred but not required.<\/p>\n
Getting Started with Next.js<\/h3>\n
Next.js<\/a> 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.<\/p>\n
Created by Vercel<\/a>, Next.js is open source and based on Node.js<\/a> and Babel<\/a>\u2014 and also integrates with React to create single-page apps.<\/p>\n
Project setup and installation<\/h3>\n
To create a new project, run the following command in our terminal:<\/p>\n
    npx create-next-app <project-name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Next, navigate into the project directory and install the qrcode.react<\/code> package with the command below:<\/p>\n
    cd <project-name<\/span>><\/span> && npm install qrcode.react\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Running npm run dev<\/code> will start the development server by default at http:\/\/localhost:3000<\/code> in our browser.<\/p>\n
What is qrcode.react?<\/h3>\n
qrcode.react<\/code><\/a> 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.<\/p>\n
qrcode.react<\/code> 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<\/strong>. It uses a set of default option values to display a QR code.<\/p>\n
Building the QR code component<\/h3>\n
With the project fully set up and configured, we can start building the QR code menu.<\/p>\n
Import the QR code component from qrcode.react<\/code> to create a QR code from the input value.\nThen, add the following code.<\/p>\n
    \/\/ .\/pages\/index.js<\/span>\n    \n    import<\/span> React, { useState, useRef } from<\/span> \"react\"<\/span>;\n    import<\/span> { QRCodeSVG } from<\/span> \"qrcode.react\"<\/span>;\n    export<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n      const<\/span> qrcodeRef = useRef(null<\/span>);\n      const<\/span> [qrcode, setQrcode] = useState(\"\"<\/span>);\n      const<\/span> handleChange = (event<\/span>) =><\/span> {\n        setQrcode(event.target.value ? event.target.value : \"\"<\/span>);\n      };\n      return<\/span> (\n        <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n          <h1<\/span> className<\/span>=\"title\"<\/span>><\/span>Restaurant qr code Menu<\/h1<\/span>><\/span>\n          <input<\/span> type<\/span>=\"text\"<\/span> placeholder<\/span>=\"type here\"<\/span> onChange<\/span>={handleChange}<\/span> \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The code block above does the following:<\/p>\n
The source code is on Github<\/a>.<\/p>\n