Build a Simple Next.js QR Code Generator App

Written by

FixTechToday

in

In today’s digital landscape, QR codes have become ubiquitous. From product packaging to website links, they offer a quick and convenient way to access information. As web developers, we often encounter the need to generate these codes. This article provides a comprehensive guide on building a simple QR code generator application using Next.js, a popular React framework for building web applications. We’ll cover everything from setting up your development environment to deploying your application, making it accessible to users.

Why Build a QR Code Generator?

Creating a QR code generator offers several advantages. Firstly, it’s a practical skill to have, as QR codes are used everywhere. Secondly, it’s an excellent project for learning Next.js fundamentals, including routing, state management, and server-side rendering. Finally, it’s a project that you can easily expand upon, adding features like customization options (color, size), history, and the ability to download QR codes as images. This project is ideal for beginners and intermediate developers looking to expand their web development skillset.

Prerequisites

Before we begin, ensure you have the following installed on your machine:

  • Node.js and npm (Node Package Manager) or yarn installed.
  • A code editor (VS Code, Sublime Text, etc.).
  • Basic understanding of HTML, CSS, and JavaScript.

Setting Up Your Next.js Project

First, let’s create a new Next.js project. Open your terminal and run the following command:

npx create-next-app qr-code-generator

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

cd qr-code-generator

Now, start the development server:

npm run dev

or

yarn dev

Your Next.js application should now be running on http://localhost:3000. Open this in your browser to see the default Next.js welcome page.

Installing Dependencies

We’ll need a library to generate QR codes. One of the most popular and easy-to-use libraries is “qrcode”. Install it using npm or yarn:

npm install qrcode

or

yarn add qrcode

Creating the QR Code Generator Component

Let’s create a new component to handle the QR code generation. In the “pages” directory, create a new file named “qr.js” (or any name you prefer). This will be the route for our QR code generator (e.g., http://localhost:3000/qr).

Here’s the basic structure of the “qr.js” file:

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

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

  const generateQRCode = async () => {
    try {
      const qrCodeDataURL = await QRCode.toDataURL(text);
      setQrCode(qrCodeDataURL);
    } catch (error) {
      console.error('Error generating QR code:', error);
      setQrCode(''); // Clear QR code on error
    }
  };

  return (
    <div>
      <h2>QR Code Generator</h2>
      <input
        type="text"
        placeholder="Enter text or URL"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={generateQRCode}>Generate QR Code</button>
      {qrCode && <img src={qrCode} alt="QR Code" />}
    </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 the `qrcode` library.
  • We initialize two state variables: `text` (for the input text) and `qrCode` (for the generated QR code’s data URL).
  • The `generateQRCode` function is an asynchronous function that takes the input text and uses the `QRCode.toDataURL()` method to generate a data URL representing the QR code image.
  • The function then updates the `qrCode` state variable with the generated data URL, which is then rendered as an image.
  • The JSX returns an input field for the user to enter text, a button to trigger QR code generation, and an image to display the generated QR code.

Adding Styling

To make our application visually appealing, let’s add some basic styling. Create a file named “qr.module.css” (or any name you prefer) in the same directory as “qr.js”. Add the following CSS:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-family: sans-serif;
}

input {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 300px;
}

button {
  padding: 10px 20px;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

img {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 5px;
}

Import the CSS file into your “qr.js” file:

import styles from './qr.module.css'; // Import the CSS module

And apply the styles to your components:

<div className={styles.container}>
  <h2>QR Code Generator</h2>
  <input
    type="text"
    placeholder="Enter text or URL"
    value={text}
    onChange={(e) => setText(e.target.value)}
  />
  <button onClick={generateQRCode}>Generate QR Code</button>
  {qrCode && <img src={qrCode} alt="QR Code" />}
</div>

Testing the Application

Save both files and navigate to http://localhost:3000/qr in your browser. Enter some text or a URL in the input field and click the “Generate QR Code” button. You should see a QR code generated based on your input.

Enhancements and Features

Now that we have a basic QR code generator, let’s explore some enhancements and features we can add:

1. QR Code Customization

The `qrcode` library allows you to customize the QR code’s appearance. You can modify the color, size, and other properties. Let’s add options for color and size.

Modify the “qr.js” file to include state variables for color and size and update the `generateQRCode` function to accept these parameters:

import { useState } from 'react';
import QRCode from 'qrcode';
import styles from './qr.module.css';

export default function QRGenerator() {
  const [text, setText] = useState('');
  const [qrCode, setQrCode] = useState('');
  const [color, setColor] = useState('#000000'); // Default black
  const [size, setSize] = useState(256); // Default size

  const generateQRCode = async () => {
    try {
      const qrCodeDataURL = await QRCode.toDataURL(text, {
        color: { dark: color, light: "#ffffff" }, // Set colors
        width: size, // Set size
        errorCorrectionLevel: 'H',
      });
      setQrCode(qrCodeDataURL);
    } catch (error) {
      console.error('Error generating QR code:', error);
      setQrCode('');
    }
  };

  return (
    <div className={styles.container}>
      <h2>QR Code Generator</h2>
      <input
        type="text"
        placeholder="Enter text or URL"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <label htmlFor="colorPicker">Color:</label>
      <input
        type="color"
        id="colorPicker"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <label htmlFor="sizeInput">Size (px):</label>
      <input
        type="number"
        id="sizeInput"
        value={size}
        onChange={(e) => setSize(parseInt(e.target.value, 10))}
        min="100"
        max="500"
      />
      <button onClick={generateQRCode}>Generate QR Code</button>
      {qrCode && <img src={qrCode} alt="QR Code" />}
    </div>
  );
}

Add the following CSS to the “qr.module.css” file:

label {
  margin-top: 10px;
}

input[type="color"] {
  margin-left: 10px;
  width: 50px;
  height: 30px;
}

input[type="number"] {
  margin-left: 10px;
  padding: 5px;
  width: 60px;
}

Now, when you refresh the page, you’ll see color and size input fields. You can customize the QR code’s appearance.

2. Error Handling

The provided code includes basic error handling. If the QR code generation fails, it logs an error to the console and clears the `qrCode` state. However, we can improve this by displaying an error message to the user.

Modify the “qr.js” file to include an error message:

import { useState } from 'react';
import QRCode from 'qrcode';
import styles from './qr.module.css';

export default function QRGenerator() {
  const [text, setText] = useState('');
  const [qrCode, setQrCode] = useState('');
  const [color, setColor] = useState('#000000');
  const [size, setSize] = useState(256);
  const [error, setError] = useState(''); // New state for error message

  const generateQRCode = async () => {
    try {
      const qrCodeDataURL = await QRCode.toDataURL(text, {
        color: { dark: color, light: "#ffffff" },
        width: size,
        errorCorrectionLevel: 'H',
      });
      setQrCode(qrCodeDataURL);
      setError(''); // Clear any previous errors on success
    } catch (error) {
      console.error('Error generating QR code:', error);
      setQrCode('');
      setError('Error generating QR code. Please check your input.'); // Set error message
    }
  };

  return (
    <div className={styles.container}>
      <h2>QR Code Generator</h2>
      <input
        type="text"
        placeholder="Enter text or URL"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <label htmlFor="colorPicker">Color:</label>
      <input
        type="color"
        id="colorPicker"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <label htmlFor="sizeInput">Size (px):</label>
      <input
        type="number"
        id="sizeInput"
        value={size}
        onChange={(e) => setSize(parseInt(e.target.value, 10))}
        min="100"
        max="500"
      />
      <button onClick={generateQRCode}>Generate QR Code</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}  <!-- Display error message -->
      {qrCode && <img src={qrCode} alt="QR Code" />}
    </div>
  );
}

Now, if an error occurs, the user will see an error message.

3. Download Functionality

Provide a way for users to download the generated QR code as an image file. Add a download button and implement the download functionality.

Modify the “qr.js” file:

import { useState } from 'react';
import QRCode from 'qrcode';
import styles from './qr.module.css';

export default function QRGenerator() {
  const [text, setText] = useState('');
  const [qrCode, setQrCode] = useState('');
  const [color, setColor] = useState('#000000');
  const [size, setSize] = useState(256);
  const [error, setError] = useState('');

  const generateQRCode = async () => {
    try {
      const qrCodeDataURL = await QRCode.toDataURL(text, {
        color: { dark: color, light: "#ffffff" },
        width: size,
        errorCorrectionLevel: 'H',
      });
      setQrCode(qrCodeDataURL);
      setError('');
    } catch (error) {
      console.error('Error generating QR code:', error);
      setQrCode('');
      setError('Error generating QR code. Please check your input.');
    }
  };

  const downloadQRCode = () => {
    if (qrCode) {
      const downloadLink = document.createElement('a');
      downloadLink.href = qrCode;
      downloadLink.download = 'qrcode.png'; // Set the filename
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    }
  };

  return (
    <div className={styles.container}>
      <h2>QR Code Generator</h2>
      <input
        type="text"
        placeholder="Enter text or URL"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <label htmlFor="colorPicker">Color:</label>
      <input
        type="color"
        id="colorPicker"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <label htmlFor="sizeInput">Size (px):</label>
      <input
        type="number"
        id="sizeInput"
        value={size}
        onChange={(e) => setSize(parseInt(e.target.value, 10))}
        min="100"
        max="500"
      />
      <button onClick={generateQRCode}>Generate QR Code</button>
      {qrCode && <button onClick={downloadQRCode}>Download QR Code</button>} <!-- Add download button -->
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {qrCode && <img src={qrCode} alt="QR Code" />}
    </div>
  );
}

Add the following CSS to the “qr.module.css” file:

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

Now, you can download the generated QR code.

4. Input Validation

Add input validation to ensure the user enters valid data. For example, you might want to validate that the input is not empty or validate that a URL is a valid URL.

Modify the “qr.js” file:

import { useState } from 'react';
import QRCode from 'qrcode';
import styles from './qr.module.css';

export default function QRGenerator() {
  const [text, setText] = useState('');
  const [qrCode, setQrCode] = useState('');
  const [color, setColor] = useState('#000000');
  const [size, setSize] = useState(256);
  const [error, setError] = useState('');
  const [isValidURL, setIsValidURL] = useState(true);

  const validateURL = (string) => {
    try {
      new URL(string);
      setIsValidURL(true);
    } catch (_) {
      setIsValidURL(false);
    }
  };

  const generateQRCode = async () => {
    if (!text.trim()) {
      setError('Please enter text or a URL.');
      return;
    }

    if (!isValidURL) {
      setError('Please enter a valid URL.');
      return;
    }

    try {
      const qrCodeDataURL = await QRCode.toDataURL(text, {
        color: { dark: color, light: "#ffffff" },
        width: size,
        errorCorrectionLevel: 'H',
      });
      setQrCode(qrCodeDataURL);
      setError('');
    } catch (error) {
      console.error('Error generating QR code:', error);
      setQrCode('');
      setError('Error generating QR code. Please check your input.');
    }
  };

  const downloadQRCode = () => {
    if (qrCode) {
      const downloadLink = document.createElement('a');
      downloadLink.href = qrCode;
      downloadLink.download = 'qrcode.png';
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    }
  };

  return (
    <div className={styles.container}>
      <h2>QR Code Generator</h2>
      <input
        type="text"
        placeholder="Enter text or URL"
        value={text}
        onChange={(e) => {
          setText(e.target.value);
          validateURL(e.target.value);
        }}
      />
      {!isValidURL && text.trim() !== '' && (
        <p style={{ color: 'red' }}>Please enter a valid URL.</p>
      )}
      <label htmlFor="colorPicker">Color:</label>
      <input
        type="color"
        id="colorPicker"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <label htmlFor="sizeInput">Size (px):</label>
      <input
        type="number"
        id="sizeInput"
        value={size}
        onChange={(e) => setSize(parseInt(e.target.value, 10))}
        min="100"
        max="500"
      />
      <button onClick={generateQRCode}>Generate QR Code</button>
      {qrCode && <button onClick={downloadQRCode}>Download QR Code</button>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {qrCode && <img src={qrCode} alt="QR Code" />}
    </div>
  );
}

The code now includes a `validateURL` function and calls it with every change in the input field. The generateQRCode function now checks if the input is empty or if it’s a valid URL, and displays an appropriate error message.

Deploying Your Application

Once you’ve built your QR code generator, you’ll want to deploy it so others can use it. Next.js makes deployment easy. Here are a few options:

1. Vercel

Vercel is the platform created by the same team that built Next.js. It’s designed for deploying Next.js applications with minimal configuration.

  1. Push your code to a Git repository (e.g., GitHub, GitLab, Bitbucket).
  2. Sign up for a Vercel account if you don’t already have one.
  3. Import your Git repository into Vercel. Vercel will automatically detect your Next.js project and deploy it.
  4. Configure your deployment settings if needed (e.g., environment variables).
  5. Vercel will provide a URL for your deployed application.

2. Netlify

Netlify is another popular platform for deploying web applications. It offers similar ease of use as Vercel.

  1. Push your code to a Git repository.
  2. Sign up for a Netlify account.
  3. Create a new site from Git in Netlify, connecting it to your repository.
  4. Netlify will automatically detect your Next.js project and deploy it.
  5. Configure your deployment settings if needed.
  6. Netlify will provide a URL for your deployed application.

3. Other Platforms

You can also deploy your Next.js application to other platforms like:

  • AWS (Amazon Web Services)
  • Google Cloud Platform (GCP)
  • Azure
  • Your own server (with Node.js and a web server like Nginx or Apache)

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when building Next.js applications, along with solutions:

  • Incorrect Import Paths: Double-check your import paths, especially when importing components and CSS modules. Ensure that the paths are relative to the current file.
  • Missing Dependencies: Make sure you’ve installed all the necessary dependencies using `npm install` or `yarn add`.
  • Server-Side Rendering Issues: Be mindful of code that relies on the browser’s `window` or `document` objects, as these are not available during server-side rendering. Use `useEffect` hooks to run such code on the client-side only.
  • CSS Module Conflicts: If you’re using CSS modules, ensure that the class names are unique and that you’re importing the CSS module correctly.
  • Deployment Errors: Carefully review the deployment logs for any errors. Common deployment issues include missing environment variables, incorrect build commands, or incompatible Node.js versions.

Key Takeaways

  • Next.js provides a robust framework for building web applications.
  • The `qrcode` library simplifies QR code generation.
  • State management is crucial for handling user input and updating the UI.
  • Adding features, such as customization options and download functionality, enhances user experience.
  • Deploying your application allows others to use your QR code generator.

Optional FAQ

Q1: Can I use this QR code generator for commercial purposes?

Yes, you can use the generated QR codes for commercial purposes. The `qrcode` library doesn’t impose any restrictions on usage.

Q2: How do I handle larger text inputs?

If you anticipate very long text inputs, consider adding a text area instead of a simple input field. You might also want to implement a character limit to ensure the QR code remains readable. Additionally, consider adjusting the `errorCorrectionLevel` in the `toDataURL` options to ‘L’, ‘M’, ‘Q’, or ‘H’ to accommodate more data.

Q3: How can I improve the performance of the QR code generator?

For performance optimization, you could implement techniques like:

  • Memoization: Use `React.memo` or `useMemo` to memoize the QR code generation if the input hasn’t changed.
  • Code Splitting: Consider using dynamic imports for the `qrcode` library if it’s not needed immediately.
  • Lazy Loading: If you’re displaying many QR codes, consider lazy loading them.

Q4: Can I integrate this generator into my existing website?

Yes, you can integrate this QR code generator into your existing website. You can either copy the relevant code (component and styles) or create a component library that you can import into your other projects.

Q5: What are the best practices for SEO in Next.js?

For SEO optimization in Next.js, consider the following:

  • Use the `next/head` component to set meta tags, titles, and descriptions for each page.
  • Implement server-side rendering (SSR) where possible to ensure your content is indexable by search engines.
  • Optimize images to reduce page load times.
  • Use semantic HTML tags.
  • Create a sitemap.xml to help search engines crawl your site.
  • Ensure your site is mobile-friendly.

Building a QR code generator with Next.js is a rewarding project that combines practical utility with the opportunity to learn and practice essential web development skills. From setting up your project to adding advanced features like customization and download options, this guide has equipped you with the knowledge to create a functional and user-friendly application. Embrace the iterative nature of development, experiment with different features, and, most importantly, have fun while learning. The journey from a simple concept to a fully functional tool is a testament to the power of coding and the endless possibilities of the web. As you continue to refine and enhance your QR code generator, remember that each iteration brings you closer to a deeper understanding of Next.js and web development principles. The skills you gain from this project will undoubtedly serve you well in your future coding endeavors.

More posts