Quickstart

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

yarn add @pdfn/react @pdfn/tailwind @pdfn/next

pnpm add @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.

Environment	What happens
No API key	Uses local dev server (`localhost:3456`)
`pdfn_test_*` key	Uses pdfn Cloud (adds watermark)
`pdfn_live_*` key	Uses 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

Getting Started

Core

Guides

Prerequisites

1. Install

2. Add the build plugin

3. Add a template

4. Start the dev server

5. Create an API route

6. Test it

Going to production

Next steps

Dev Workflow

Components

Styling

Next.js

​Prerequisites

​1. Install

​2. Add the build plugin

​3. Add a template

​4. Start the dev server

​5. Create an API route

​6. Test it

​Going to production

​Next steps

Dev Workflow

Components

Styling

Next.js

Prerequisites

1. Install

2. Add the build plugin

3. Add a template

4. Start the dev server

5. Create an API route

6. Test it

Going to production

Next steps