Screenshot API for Next.js

Capturing a screenshot of a URL from a Next.js app means a headless browser, which you can’t run on the Edge runtime and don’t want to bundle into your deploy. Shotpane gives you a single endpoint to call from a Route Handler, Server Action, or the client — no Chromium, no SDK, no cold-start headaches in your own functions.

Route Handler example

// app/api/preview/route.ts
export async function GET(req: Request) {
  const url = new URL(req.url).searchParams.get("url")!;
  const res = await fetch(
    `https://www.shotpane.com/api/v1/screenshot?url=${encodeURIComponent(url)}&key=${process.env.SHOTPANE_KEY}`
  );
  return new Response(await res.arrayBuffer(), {
    headers: { "content-type": "image/png" },
  });
}

Why not run Chromium yourself?

You can ship puppeteer-core + a serverless Chromium layer, but you inherit cold starts, function size/memory limits, and SSRF risk on every deploy. Offloading the render keeps your app fast and your bundle small — you just call an endpoint.