Generate a QR code in Next.js

next/image against the API

The keyless API is just an image URL, so next/image can optimise it like any remote image. Allow the host first:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ protocol: "https", hostname: "useqr.app" }],
  },
};

import Image from "next/image";

<Image
  src={`https://useqr.app/api/v1/qr?data=${encodeURIComponent(url)}&size=512`}
  width={256}
  height={256}
  alt={`QR code linking to ${url}`}
/>

Honestly, next/image buys little here — the API already serves an optimised PNG with Cache-Control: immutable — so a plain <img> (see the React page) is equally good and skips the config.

Route-handler proxy

To serve codes from your own domain — same-origin CSPs, your own CDN keys, no third-party hostname in the markup — proxy through a route handler:

// app/qr/route.ts
export async function GET(request: Request) {
  const data = new URL(request.url).searchParams.get("data") ?? "";
  const upstream = await fetch(
    `https://useqr.app/api/v1/qr?data=${encodeURIComponent(data)}&size=512`,
    { cache: "force-cache" }
  );
  return new Response(upstream.body, {
    headers: {
      "Content-Type": "image/png",
      "Cache-Control": "public, max-age=31536000, immutable",
    },
  });
}

<img src="/qr?data=..."> now works anywhere in your app. cache: "force-cache" lets Next's data cache absorb repeat upstream fetches, and the immutable response header lets your CDN edge hold the bytes — after the first request per payload, useqr.app is never contacted again. Broader caching patterns are in caching and CDN strategy for QR images.

Build-time generation

For a static site with many codes — one per product page, say — fetch during static generation so zero requests happen at runtime:

// in a server component with generateStaticParams
const res = await fetch(
  `https://useqr.app/api/v1/qr?data=${encodeURIComponent(url)}&format=base64`
);
const b64 = await res.text();
// <img src={`data:image/png;base64,${b64}`} ... />

format=base64 returns the PNG as base64 text, which drops straight into a data URI in the prerendered HTML. For thousands of pages, batch it: POST /api/v1/qr/batch takes up to 100 items per call. Fully offline builds can use the qrcode npm package instead — see the Node page.

QR codes in OG images

ImageResponse (from next/og) composes JSX to a PNG for social cards. It renders plain <img> elements, so a QR code is just another element in the card:

new ImageResponse(
  <div style={{ display: "flex", width: "100%", height: "100%" }}>
    <img src={`https://useqr.app/api/v1/qr?data=${encodeURIComponent(url)}`}
         width={220} height={220} />
  </div>,
  { width: 1200, height: 630 }
);

Keep the code at least 200 px in a 1200 px card and leave the quiet zone clear of background art — OG images get scanned off other people's screens more often than you would think.

Verify before deploy

A build step that generates codes should decode them too: GET /api/v1/verify with the same parameters returns scannable and a list of issues. Wire it into CI as described in why verify that your QR code decodes.

FAQ

How do I show a QR code in a Next.js app?

Point an img or next/image at the keyless API with the payload URL-encoded. For next/image, add useqr.app to images.remotePatterns first.

How do I serve QR codes from my own domain?

A small route handler that fetches the API and streams the PNG back with an immutable cache header. Your CDN then holds each code after the first request.

Can I generate QR codes at build time?

Yes — fetch with format=base64 during static generation and inline the result as a data URI, or use the qrcode npm package for a fully offline build.

Can I put a QR code in an Open Graph image?

Yes. ImageResponse renders img elements, so include the API URL as an element in the card. Keep it at least 200 px wide with a clear margin.