Generate QR code in next js

To generate a QR code in TypeScript in Next.js using the qrcode.react library, follow these steps:

First, you need to install the qrcode.react library using npm or yarn. Run the following command in your terminal:

bash

Copy code

npm install qrcode.react

or

bash

Copy code

yarn add qrcode.react

Import the QRCode component from the qrcode.react library:

typescript

Copy code

import QRCode from ‘qrcode.react’;

In your component, you can use the QRCode component like this:

typescript

Copy code

import React from ‘react’;

import QRCode from ‘qrcode.react’;

function QRCodeGenerator() {

const qrCodeValue: string = ‘https://www.example.com'; // the value you want to generate QR code for

return (

<div>

<QRCode value={qrCodeValue} />

</div>

);

}

export default QRCodeGenerator;

The QRCode component will generate a QR code for the given value. You can style the QR code using CSS as per your requirement.

That’s it! You have successfully generated a QR code in Next.js using the qrcode.react library with TypeScript.