Next.js: Remove Image Backgrounds with a Route Handler and a React Upload Component

// app/api/cutout/route.ts
import { NextRequest } from "next/server";

export const runtime = "nodejs";          // Buffer + 25 MB bodies; edge runtime limits body size
export const maxDuration = 60;            // seconds — sync removals finish well under this

export async function POST(req: NextRequest) {
  const inbound = await req.formData();
  const file = inbound.get("image");
  if (!(file instanceof File)) return Response.json({ error: "image missing" }, { status: 400 });
  if (file.size > 25 * 1024 * 1024) return Response.json({ error: "max 25 MB" }, { status: 413 });

  const size = req.nextUrl.searchParams.get("size") === "full" ? "full" : "preview"; // preview is free
  const form = new FormData();
  form.append("image_file", file, file.name);
  form.append("size", size);
  form.append("format", "png");

  const upstream = await fetch("https://www.bgclear.ai/api/v1/remove", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.BGCLEAR_API_KEY}`,
      "Idempotency-Key": `${size}-${file.size}-${file.name}`,   // safe retries, never double-charged
    },
    body: form,
  });

  if (!upstream.ok) {
    return Response.json(await upstream.json(), { status: upstream.status });
  }
  return new Response(upstream.body, {
    headers: {
      "Content-Type": upstream.headers.get("content-type") ?? "image/png",
      "X-Credits-Remaining": upstream.headers.get("x-credits-remaining") ?? "",
      "Cache-Control": "no-store",
    },
  });
}

Put BGCLEAR_API_KEY in .env.local (no NEXT_PUBLIC_ prefix — that prefix is exactly what would leak it). Add your auth check at the top of the handler before forwarding; without one, anyone who finds the route spends your credits.

"use client";
import { useState } from "react";

export default function Cutout() {
  const [file, setFile] = useState<File | null>(null);
  const [preview, setPreview] = useState<string | null>(null);
  const [busy, setBusy] = useState<"preview" | "full" | null>(null);
  const [error, setError] = useState("");

  async function run(size: "preview" | "full") {
    if (!file) return;
    setBusy(size); setError("");
    const form = new FormData();
    form.append("image", file);
    const res = await fetch(`/api/cutout?size=${size}`, { method: "POST", body: form });
    setBusy(null);
    if (!res.ok) {
      const { error } = await res.json().catch(() => ({ error: { message: res.statusText } }));
      setError(error?.message ?? "Failed");
      return;
    }
    const url = URL.createObjectURL(await res.blob());
    if (size === "preview") setPreview(url);
    else Object.assign(document.createElement("a"), { href: url, download: "cutout.png" }).click();
  }

  return (
    <div>
      <input type="file" accept="image/*" onChange={(e) => { setFile(e.target.files?.[0] ?? null); setPreview(null); }} />
      <button disabled={!file || !!busy} onClick={() => run("preview")}>
        {busy === "preview" ? "Removing…" : "Preview (free)"}
      </button>
      {preview && (
        <>
          <img src={preview} alt="cutout preview" style={{ maxWidth: 400, background: "repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0/16px 16px" }} />
          <button disabled={!!busy} onClick={() => run("full")}>{busy === "full" ? "Exporting…" : "Download HD"}</button>
        </>
      )}
      {error && <p role="alert">{error}</p>}
    </div>
  );
}

The checkerboard background makes transparency visible. Preview first, HD on demand: previews are free, and only the HD export costs a credit — the user sees the result before anyone pays.

Body size: Vercel serverless functions accept request bodies up to 4.5 MB; for larger uploads, upload directly to blob storage (Vercel Blob, S3 presigned URL) and send image_url to the API from the route handler instead of forwarding bytes — that is a JSON call with Accept: application/json, and the result URL it returns can be stored straight into your database. Streaming: returning upstream.body streams the PNG without buffering. Rate limit: 60 requests a minute per key; queue bursts in a job runner rather than hammering from many concurrent users. Large originals: synchronous full-size requests are capped at 4 MP; route bigger ones to /api/v1/jobs and poll from a server action (bulk guide). Cost: one credit per HD export — $9 for 100, $39 for 500, $129 for 2,000 — with no subscription (pricing). Coming from remove.bg? Same fields, different URL and header: migration page.