Next.js PDF generation
Generate PDFs in Next.js without bundling Chrome
The usual advice is to install Puppeteer and run headless Chrome inside your app. On Vercel and most serverless hosts, Chromium does not fit the function bundle, cold starts add seconds, and it leaks under load. A route handler that calls a render API does the job in one fetch.
One route handler
Post your HTML to the rendering API and stream the PDF straight back to the browser. No Chromium in your bundle, instant cold starts.
// app/api/invoice/route.ts
export async function POST(req: Request) {
const { orderId } = await req.json();
const res = await fetch("https://api.pdfpipe.xyz/v1/pdf", {
method: "POST",
headers: {
Authorization: `Bearer ${process.env.PDFPIPE_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({ html: `<h1>Invoice ${orderId}</h1>`, options: { format: "A4" } }),
});
return new Response(res.body, {
headers: { "Content-Type": "application/pdf" },
});
}Why this fits Next.js and Vercel
Tiny function
Your route never loads a browser, so the bundle stays small and cold starts stay fast.
Works everywhere
Route Handlers, Server Actions, and Edge all just make an HTTP call.
Free-plan friendly
No memory-hungry browser means it runs within serverless limits.
Common Next.js use cases
- Next.js invoice PDFs generated on checkout.
- Report and statement exports from a dashboard.
- Per-user documents from React components rendered to HTML.
- Async batches delivered to a webhook for large jobs.
Frequently asked
How do I generate a PDF in Next.js?
Create a Route Handler that POSTs your HTML to a render API and returns the PDF response. There is no browser binary in your bundle and it works on Vercel out of the box.
Why not use Puppeteer in Next.js?
A full Chromium binary does not fit most serverless functions, cold starts are slow, and it leaks memory under load. Offloading to an API keeps the function small and reliable.
Does it work with the App Router and Edge?
Yes. Anything that can call fetch can use it, including Route Handlers, Server Actions, and Edge runtime.
Can I render a React component?
Yes. Render the component to HTML with renderToStaticMarkup, then send that HTML to the API.
Related guides and APIs
These pages cover related search intents. Pick the one that matches what you are building.
500 free documents a month, flat pricing after that, and a live playground you can try without signing up.