Skip to main content
Go from zero to a working PDF endpoint in your Next.js project. Everything runs locally — no API key needed until you deploy.
Not using Next.js? pdfn works with any framework. Install @pdfn/react and @pdfn/tailwind, then use the same client.generate() API.

​
Prerequisites

  • Node.js 22 or higher
  • A Next.js project (App Router or Pages Router)

​
1. Install

npm install @pdfn/react @pdfn/tailwind @pdfn/next

​
2. Add the build plugin

next.config.ts
import { withPdfn } from '@pdfn/next';

const nextConfig = { /* your existing config */ };

export default withPdfn()(nextConfig);

​
3. Add a template

npx pdfn add invoice --tailwind
This creates pdfn-templates/invoice.tsx with sample data.
Want to build templates from scratch? See Components.

​
4. Start the dev server

In one terminal, start the pdfn preview server: 
npx pdfn dev
This runs at http://localhost:3456 with live preview of your templates. See Dev Workflow for details. In another terminal, start Next.js: 
npm run dev

​
5. Create an API route

app/api/invoice/route.tsx
import { pdfn } from '@pdfn/react';
import Invoice from '@/pdfn-templates/invoice';

const client = pdfn();

export async function GET() {
  const { data, error } = await client.generate({
    react: <Invoice number="INV-001" customer="Acme Corp" total={1500} />,
  });

  if (error) {
    return Response.json(
      { error: error.code, message: error.message },
      { status: error.statusCode || 500 }
    );
  }

  return new Response(data.buffer, {
    headers: { 'Content-Type': 'application/pdf' },
  });
}
Using Pages Router? See the Pages Router example.

​
6. Test it

Visit http://localhost:3000/api/invoice in your browser. You should see your PDF.

​
Going to production

Add your API key and deploy. No code changes needed — the same client.generate() call works with pdfn Cloud.
.env.local
PDFN_API_KEY=pdfn_live_...
Get your key at console.pdfn.dev.
EnvironmentWhat happens
No API keyUses local dev server (localhost:3456)
pdfn_test_* keyUses pdfn Cloud (adds watermark)
pdfn_live_* keyUses pdfn Cloud (production)

​
Next steps

Dev Workflow

Live preview with hot reload

Components

Document, Page, and layout components

Styling

Tailwind CSS, custom CSS, and inline styles

Next.js

API routes, download buttons, and edge runtime