Cara Saya Membangun QR Code Generator yang Bisa Dikustomisasi dengan Next.js

Pendahuluan

Di era digital seperti sekarang, QR code sudah jadi alat yang ampuh untuk berbagi informasi dengan cepat dan praktis. Entah itu link website, detail acara, atau informasi produk, QR code membuat proses berbagi data jadi tanpa repot. Terinspirasi dari kemudahan itu, saya membuat aplikasi QR Code Generator yang bisa diakses di qr.handiani.my.id, yang memudahkan siapa saja membuat dan mengkustomisasi QR code.

Di artikel ini saya akan menjelaskan bagaimana proyek ini saya bangun dengan Next.js dan sejumlah tool modern lainnya. Kalau Anda tertarik membuat QR code generator sendiri atau ingin tahu tech stack yang saya pakai, silakan lanjut membaca!

Fitur Utama QR Code Generator

• Render QR Code Real-Time: pengguna cukup memasukkan URL atau teks, dan QR code-nya langsung tampil saat itu juga.
• Opsi Kustomisasi yang Lengkap: tersedia pilihan gaya titik, warna, bentuk, bahkan mengunggah gambar sendiri.
• Bisa Diunduh dalam Berbagai Format: QR code bisa diunduh sebagai PNG, JPEG, SVG, atau WEBP.
• Dukungan Mode Gelap dan Terang: pergantian tema sudah tersedia demi pengalaman pengguna yang lebih nyaman.

Tool dan Teknologi

Berikut stack yang saya pakai untuk proyek ini:

• Framework Frontend: Next.js 14 dengan App Router.
• Styling: Tailwind CSS dan NextUI untuk desain yang rapi dan responsif.
• Library QR Code: qr-code-styling untuk kustomisasi QR code tingkat lanjut.
• Color Picker: react-colorful untuk pemilihan warna yang ringkas dan mudah dipakai.
• Deployment: aplikasinya di-deploy ke Vercel dengan domain kustom.

Struktur Aplikasi

Proyek ini terbagi menjadi dua komponen utama:

1. Komponen QrCode Komponen ini menangani proses render dan pengunduhan QR code. Berikut gambaran singkat cara kerjanya:

import { useEffect, useRef, useState } from "react";
import QRCodeStyling from "qr-code-styling";

const QrCode = ({ data, options }) => {
  const qrCodeRef = useRef(null);
  const qrCode = useRef(null);

  const [extension, setExtension] = useState("png");
  const [name, setName] = useState("qr");

  const onDownloadClick = () => {
    qrCode.current?.download({ name, extension });
  };

  useEffect(() => {
    if (!qrCode.current) {
      qrCode.current = new QRCodeStyling({ data, ...options });
    }
    qrCode.current.update({ data, ...options });

    if (qrCodeRef.current) {
      qrCode.current.append(qrCodeRef.current);
    }
  }, [data, options]);

  return (
    <div>
      <div ref={qrCodeRef}></div>
      <button onClick={onDownloadClick}>Download QR Code</button>
    </div>
  );
};

export default QrCode;

2. Komponen Home Halaman utama menggabungkan komponen QrCode dan menyediakan kontrol kustomisasi yang mudah dipakai. Fiturnya meliputi:

• Input untuk data (URL atau teks).
• Unggah gambar sendiri untuk disematkan ke dalam QR code.
• Slider dan picker untuk mengatur warna, bentuk, dan margin.

Opsi Kustomisasi Utama

Pengguna bisa mengatur hal-hal berikut:

1. Dimensi QR Code: atur lebar dan tingginya.
2. Warna: atur warna titik, latar, dan sudut lewat color picker.
3. Gaya Titik: pilih berbagai gaya seperti kotak, rounded, atau titik.
4. Sudut: sesuaikan tampilan titik dan kotak pada bagian sudut.
5. Gambar Tersemat: tambahkan logo atau gambar apa pun di tengah QR code.

Berikut contoh kontrolnya:

<Input
  label="Text or URL"
  value={data}
  onChange={(e) => setData(e.target.value)}
  placeholder="Input your text"
/>

<RadioGroup
  label="Shape"
  value={options.shape}
  onChange={(shape) => setOptions({ ...options, shape })}
>
  <Radio value="circle">Circle</Radio>
  <Radio value="square">Square</Radio>
</RadioGroup>

<HexAlphaColorPicker
  color={options.backgroundOptions?.color}
  onChange={(color) => setOptions({ ...options, backgroundOptions: { color } })}
/>

Tantangan dan Solusinya

1. Render Dinamis dengan Next.js: hook useEffect memastikan QR code ikut diperbarui begitu input atau pengaturannya berubah.
2. Mengelola State untuk Opsi yang Kompleks: dengan hook useState dan satu objek options, struktur state-nya tetap rapi dan mudah dikembangkan.
3. Unduhan File dalam Berbagai Format: library qr-code-styling membuat ekspor QR code ke format seperti PNG dan SVG jadi sederhana.

Kesimpulan

Membangun QR Code Generator ini jadi pengalaman yang menyenangkan, memadukan sisi kreatif dan sisi teknis. Aplikasinya memberi pengguna cara yang praktis untuk membuat dan mengkustomisasi QR code, baik untuk keperluan pribadi maupun profesional.

Silakan coba sendiri di qr.handiani.my.id, dan beri tahu saya pendapat Anda! Selamat ngoding!