> ## Documentation Index
> Fetch the complete documentation index at: https://pdfn.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Install pdfn in a Next.js project, create a template, add an API route, and generate your first PDF. No API key required for local development.

Go from zero to a working PDF endpoint in your Next.js project. Everything runs locally — no API key needed until you deploy.

<Note>
  Not using Next.js? pdfn works with any framework. Install `@pdfn/react` and `@pdfn/tailwind`, then use the same `client.generate()` API.
</Note>

## Prerequisites

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

## 1. Install

<CodeGroup>
  ```bash npm theme={null}
  npm install @pdfn/react @pdfn/tailwind @pdfn/next
  ```

  ```bash yarn theme={null}
  yarn add @pdfn/react @pdfn/tailwind @pdfn/next
  ```

  ```bash pnpm theme={null}
  pnpm add @pdfn/react @pdfn/tailwind @pdfn/next
  ```
</CodeGroup>

## 2. Add the build plugin

```ts next.config.ts theme={null}
import { withPdfn } from '@pdfn/next';

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

export default withPdfn()(nextConfig);
```

## 3. Add a template

```bash theme={null}
npx pdfn add invoice --tailwind
```

This creates `pdfn-templates/invoice.tsx` with sample data.

<Note>
  Want to build templates from scratch? See [Components](/components).
</Note>

## 4. Start the dev server

In one terminal, start the pdfn preview server:

```bash theme={null}
npx pdfn dev
```

This runs at `http://localhost:3456` with live preview of your templates. See [Dev Workflow](/dev-workflow) for details.

In another terminal, start Next.js:

```bash theme={null}
npm run dev
```

## 5. Create an API route

```tsx app/api/invoice/route.tsx theme={null}
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' },
  });
}
```

<Note>
  Using Pages Router? See the [Pages Router example](/nextjs).
</Note>

## 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.

```bash .env.local theme={null}
PDFN_API_KEY=pdfn_live_...
```

Get your key at [console.pdfn.dev](https://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

<CardGroup cols={2}>
  <Card title="Dev Workflow" icon="terminal" href="/dev-workflow">
    Live preview with hot reload
  </Card>

  <Card title="Components" icon="cube" href="/components">
    Document, Page, and layout components
  </Card>

  <Card title="Styling" icon="paintbrush" href="/styling">
    Tailwind CSS, custom CSS, and inline styles
  </Card>

  <Card title="Next.js" icon="code" href="/nextjs">
    API routes, download buttons, and edge runtime
  </Card>
</CardGroup>