Build a Simple Next.js Interactive QR Code Generator

Written by

javascriptdebugged

in

In today’s digital world, QR codes are everywhere. From websites and contact information to product details and payment links, they provide a quick and easy way to access information. As a developer, understanding how to generate QR codes programmatically opens up a range of possibilities for your projects. This tutorial will guide you through building a simple, interactive QR code generator using Next.js, a popular React framework for building web applications.

Why Build a QR Code Generator?

Creating a QR code generator offers several advantages. Firstly, it’s a practical project that can be incredibly useful. Imagine quickly generating QR codes for your business cards, website links, or promotional materials. Secondly, it’s an excellent learning exercise. You’ll gain hands-on experience with Next.js features like dynamic routing, state management, and server-side rendering (SSR), all while working on a tangible project. Finally, it’s a great way to improve your skills and demonstrate your ability to build functional, user-friendly web applications.

Prerequisites

Before we begin, ensure you have the following installed:

  • Node.js and npm (or yarn) installed on your system.
  • A code editor (like VS Code, Sublime Text, or Atom).
  • Basic knowledge of JavaScript and React.

Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app qr-code-generator

This command creates a new Next.js project named “qr-code-generator.” Navigate into your project directory:

cd qr-code-generator

Now, install the necessary dependencies. We’ll be using the “qrcode” library to generate the QR codes. Run the following command:

npm install qrcode

Project Structure

Your project directory will look something like this:


qr-code-generator/
├── node_modules/
├── pages/
│   ├── _app.js
│   └── index.js
├── public/
├── .gitignore
├── next.config.js
├── package-lock.json
├── package.json
└── README.md

The `pages` directory is where we’ll create our application’s routes. `index.js` will be our home page and the location of our QR code generator.

Building the QR Code Generator

Let’s start by modifying the `pages/index.js` file. This file will contain the form for the user to input data and the display of the generated QR code.

Here’s the code:


import { useState } from 'react';
import QRCode from 'qrcode.react';

export default function Home() {
  const [text, setText] = useState('');
  const [qrCode, setQrCode] = useState('');

  const generateQrCode = async () => {
    try {
      const response = await fetch('api/qrcode', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ text }),
      });

      const data = await response.json();
      setQrCode(data.qrCode);
    } catch (error) {
      console.error('Error generating QR code:', error);
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }}>
      <h1>QR Code Generator</h1>
      <input
        type="text"
        placeholder="Enter text or URL"
        value={text}
        onChange={(e) => setText(e.target.value)}
        style={{ padding: '10px', fontSize: '16px', margin: '10px' }}
      />
      <button onClick={generateQrCode}
        style={{ padding: '10px 20px', fontSize: '16px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
      >
        Generate QR Code
      </button>
      {qrCode && (
        <div style={{ marginTop: '20px' }}>
          <QRCode value={qrCode} size={256} bgColor="#ffffff" fgColor="#000000" />
        </div>
      )}
    </div>
  );
}

Let’s break down this code:

  • We import `useState` from React for managing the input text and the generated QR code. We also import `QRCode` from the `qrcode.react` library.
  • We define the `Home` component, the main component for our page.
  • We use `useState` to create state variables: `text` to store the input text and `qrCode` to store the generated QR code.
  • The `generateQrCode` function is an asynchronous function that handles the generation of the QR code.
  • Inside `generateQrCode`, we make a POST request to the `/api/qrcode` endpoint (which we’ll create shortly) passing the `text` as the request body.
  • We use `fetch` API to send the request to the API route.
  • If the request is successful, we receive the generated QR code and update the `qrCode` state using `setQrCode`.
  • We return JSX that renders an input field, a button, and the QR code itself, if it exists.
  • The `QRCode` component from the `qrcode.react` library takes the `value` (the text to encode), `size` (the size of the QR code in pixels), `bgColor`, and `fgColor` (background and foreground colors) as props.

Creating the API Route

Next.js provides a convenient way to create API routes. These routes live in the `pages/api` directory. Create a new file named `pages/api/qrcode.js` and add the following code:


import QRCode from 'qrcode';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { text } = req.body;

    if (!text) {
      return res.status(400).json({ error: 'Text is required' });
    }

    try {
      const qrCodeDataURL = await QRCode.toDataURL(text);
      res.status(200).json({ qrCode: qrCodeDataURL });
    } catch (error) {
      console.error('Error generating QR code:', error);
      res.status(500).json({ error: 'Failed to generate QR code' });
    }
  } else {
    res.status(405).json({ error: 'Method Not Allowed' });
  }
}

Let’s break down this API route code:

  • We import the `qrcode` library.
  • The `handler` function is the entry point for our API route. It takes `req` (request) and `res` (response) objects as arguments.
  • We check if the request method is POST.
  • We extract the `text` from the request body.
  • We validate that the `text` is not empty. If it is, we return a 400 Bad Request error.
  • Inside the `try` block, we use `QRCode.toDataURL(text)` to generate a data URL for the QR code. This data URL is a base64 encoded string representing the QR code image.
  • We then send a 200 OK response with the `qrCode` data URL in the response body.
  • If any errors occur during the process, we catch them and return a 500 Internal Server Error.
  • If the request method is not POST, we return a 405 Method Not Allowed error.

Running Your Application

Now, start your Next.js development server by running the following command in your terminal:

npm run dev

This command starts the development server, and you can access your application in your browser at `http://localhost:3000`. Enter some text or a URL into the input field, click the “Generate QR Code” button, and you should see the QR code generated below the input and button.

Styling and Customization

The current styling is basic. Let’s add some basic styling to make the app look better. You can use CSS-in-JS, a CSS framework like Tailwind CSS, or a simple CSS file. For simplicity, we’ll use inline styles, but for larger projects, consider using a CSS framework or a separate CSS file for better organization.

Here’s the updated `pages/index.js` file with some basic styling:


import { useState } from 'react';
import QRCode from 'qrcode.react';

export default function Home() {
  const [text, setText] = useState('');
  const [qrCode, setQrCode] = useState('');

  const generateQrCode = async () => {
    try {
      const response = await fetch('api/qrcode', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ text }),
      });

      const data = await response.json();
      setQrCode(data.qrCode);
    } catch (error) {
      console.error('Error generating QR code:', error);
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px', fontFamily: 'sans-serif' }}>
      <h1 style={{ marginBottom: '20px', fontSize: '2em' }}>QR Code Generator</h1>
      <input
        type="text"
        placeholder="Enter text or URL"
        value={text}
        onChange={(e) => setText(e.target.value)}
        style={{ padding: '10px', fontSize: '16px', margin: '10px', width: '300px', borderRadius: '5px', border: '1px solid #ccc' }}
      />
      <button
        onClick={generateQrCode}
        style={{ padding: '10px 20px', fontSize: '16px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginTop: '10px' }}
      >
        Generate QR Code
      </button>
      {qrCode && (
        <div style={{ marginTop: '20px', border: '1px solid #ccc', padding: '10px', borderRadius: '5px', backgroundColor: '#f9f9f9' }}>
          <QRCode value={qrCode} size={256} bgColor="#ffffff" fgColor="#000000" />
        </div>
      )}
    </div>
  );
}

We’ve added some basic inline styles to the `div`, `h1`, `input`, and `button` elements to improve the visual appearance. Feel free to experiment with different styles to customize the look and feel of your QR code generator.

Advanced Features

Once you’ve got the basics working, you can explore some advanced features:

  • **Error Handling:** Implement more robust error handling to provide better feedback to the user. For instance, display an error message if the text input is invalid or if the QR code generation fails.
  • **QR Code Customization:** Allow users to customize the QR code’s appearance, such as the color, size, and error correction level. You can pass these options to the `QRCode.toDataURL()` method.
  • **Download Functionality:** Add a button that allows users to download the generated QR code as an image (e.g., PNG). This would involve creating a link with the `href` attribute set to the QR code’s data URL and the `download` attribute set to a desired filename.
  • **Dynamic Size Adjustment:** Allow the size of the QR code to be adjusted dynamically based on the input text length.
  • **Server-Side Rendering (SSR):** While this example uses client-side rendering for the QR code generation, you could explore server-side rendering to improve SEO and performance, especially if you plan to use this on a production site.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • **Incorrect Import of QRCode:** Make sure you are importing `QRCode` from the correct library (`qrcode.react`).
  • **API Route Errors:** Double-check your API route (`pages/api/qrcode.js`) for any errors, such as incorrect method handling or missing dependencies. Also, inspect the browser’s console for any network errors.
  • **CORS Issues:** If you’re encountering CORS (Cross-Origin Resource Sharing) issues when making requests to your API route from a different domain, you may need to configure CORS on your server. This is less likely in this simple example, but it’s good to be aware of.
  • **Incorrect Data Passing:** Ensure that you are passing the correct data (the text) to the API route in the correct format (JSON). Inspect your network requests in the browser’s developer tools to verify the data being sent.
  • **Missing Dependencies:** Make sure you have installed all the necessary dependencies (e.g., `qrcode`) using npm or yarn.

Key Takeaways

  • Next.js provides a straightforward way to build interactive web applications.
  • API routes in Next.js make it easy to handle server-side logic.
  • The `qrcode` library simplifies QR code generation.
  • You can easily integrate external libraries to enhance your Next.js projects.

FAQ

  1. Can I use this QR code generator for commercial purposes?

    Yes, you can use this QR code generator for commercial purposes. However, always ensure you comply with the licensing terms of the libraries you use (e.g., `qrcode.react` and `qrcode`).

  2. How can I deploy this application?

    You can deploy your Next.js application to various platforms, such as Vercel, Netlify, or AWS. Vercel is particularly well-suited for Next.js applications, offering easy deployment and automatic scaling.

  3. Can I add a logo to the QR code?

    Yes, adding a logo to a QR code is possible. The `qrcode` library doesn’t directly support this feature. You would need to use a more advanced QR code generation library, or you can overlay the logo on the generated QR code image using a canvas or image manipulation techniques.

  4. What is the difference between client-side and server-side QR code generation?

    In client-side generation, the QR code is generated in the user’s browser using JavaScript. In server-side generation, the QR code is generated on the server and sent to the client. Server-side rendering can be better for SEO and performance, especially for content that needs to be indexed by search engines. This particular example uses client-side generation.

Building a QR code generator in Next.js is a fantastic way to learn and apply your web development skills. By following this tutorial, you’ve not only created a useful tool but also gained experience with essential Next.js features and API route creation. Remember, the possibilities are vast, and the journey of learning never truly ends. Embrace the opportunity to experiment, refine your skills, and build amazing web applications. Keep exploring, keep coding, and keep creating. You’ve now taken a significant step toward becoming a more capable and confident developer.

More posts