QR Code Generator in Next.js

QR Code Generator in Next.js

A basic QR code generator component in Next JS.

Amarnath P's photo
Amarnath P
·

3 min read

Table of contents

Next JS is a popular React framework designed for building modern web applications. Next JS can simplify the development process by offering server-side and static rendering. It also supports serverless functions, allowing you to create API's and dynamic routes.

This tutorial will use Next JS to build a QR code generator. QR codes are powering everything, from regular payment to even hotel menus everything has a QR code in it.

Prerequisites

To complete this tutorial, you need:

  • Node JS installed in your local development environment

  • Basic knowledge of Next JS

Getting started

This step will include how you can set up the Next JS project. Firstly, set up your Next JS project.

npx create-next-app qr-code

Now let's run your project.

cd qr-code

Or if your using linux

ls qr-code

Then run your local server with this command

npm run dev

Once the setup is complete install the required dependencies.

npm install next-qrcode

Once the installation is done, you can import it to your app with this code:

import { useQRCode } from 'next-qrcode';

Generating QR code

Now to generate the QR code you need to pass the data you want to the QR code component. You can use a URL or a phone number or a piece of text.

For example to generate a QR code for one of my blog posts:

https://cxsmicguy.hashnode.dev/image-compression-with-nodejs-and-sharp

You can use the following code:

import { useQRCode } from 'next-qrcode';

export default function QRCode() {
  const { Image } = useQRCode();

  return (
    <Image
      text={'https://cxsmicguy.hashnode.dev/image-compression-with-nodejs-and-sharp'}
      options={{
        type: 'image/jpeg',
        quality: 1,
        errorCorrectionLevel: 'M',
        margin: 3,
        scale: 4,
        width: 200,
        color: {
          dark: '#000',
          light: '#FFFFFF',
        },
      }}
    />
  );
};

Making a dynamic component

You can also make a component that you can use in multiple parts of your project with next-qrcode package.

Here is an example for it:

import { useQRCode } from 'next-qrcode';

export default function QRCode({ data, width }) {
  const { Image } = useQRCode();

  return (
    <Image
      text={data}
      options={{
        type: 'image/jpeg',
        quality: 1,
        errorCorrectionLevel: 'M',
        margin: 3,
        scale: 4,
        width: !!width ? width : 200,
        color: {
          dark: '#000',
          light: '#FFFFFF',
        },
      }}
    />
  );
};```

You can use the component in your project like this:

```javascript
import QRCode from "@/components/QRCode";

export default function Page() {
  return(
    <div>
      <QRCode data={"https://github.com"} width={400} />
    </div>
  )
}

Here data means the data on which the QR code needs to be created and width means the width of the QR code.

Conclusion

In this tutorial, you learned how you can make a QR code generator in Next JS. First, you set up the Next JS project then you installed the next-qrcode package. Then you made a QR code generator. With the next-qrcode adding a QR code to your project has made it easy.

For more documentation on next-qrcode reffer to

qr codenext js