# QR Code Generator in Next.js

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.

```bash
npx create-next-app qr-code
```

Now let's run your project.

```bash
cd qr-code
```

Or if your using linux

```bash
ls qr-code
```

Then run your local server with this command

```bash
npm run dev
```

Once the setup is complete install the required dependencies.

```bash
npm install next-qrcode
```

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

```javascript
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:

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

You can use the following code:

```javascript
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:

````javascript
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