A minimal, polished Next.js 14 App Router app that converts every page of a PDF into a high-resolution PNG image (300 DPI) and bundles them into a downloadable ZIP archive.
| Layer | Library |
|---|---|
| Framework | Next.js 14 (App Router) |
| PDF → PNG | pdfjs-dist + @napi-rs/canvas |
| ZIP bundling | jszip |
| Styling | CSS Modules (Soft UI / Minimalist) |
| Font | DM Sans + DM Mono (Google Fonts) |
- Node.js 18+
- The renderer uses
@napi-rs/canvas, which ships prebuilt binaries for common Linux and macOS targets. - If your platform falls back to source compilation, install the native build toolchain recommended by that package.
# 1. Install dependencies
npm install
# 2. Start the dev server
npm run devOpen http://localhost:3000.
npm run build
npm startpdf-to-img-converter/
├── app/
│ ├── globals.css # CSS custom properties + resets
│ ├── layout.tsx # Root layout (Google Fonts, metadata)
│ ├── page.tsx # Main UI (drag-drop, preview, download)
│ ├── page.module.css # Scoped CSS Modules
│ └── api/
│ └── convert/
│ └── route.ts # POST handler → PDF→PNG→ZIP pipeline
├── next.config.js # serverComponentsExternalPackages for canvas
├── package.json
└── tsconfig.json
Request: multipart/form-data with a file field (PDF, max 10 MB).
Response: Binary ZIP archive (application/zip).
| Header | Description |
|---|---|
Content-Type |
application/zip |
Content-Disposition |
attachment; filename="<name>_images.zip" |
X-Page-Count |
Number of pages converted |
Error responses are JSON: { "error": "..." }.
- Max file size: 10 MB
- Only PDF files are accepted
- Serverless timeout: 60 s (adjust
maxDurationin the route file) - PDF rendering uses a native canvas backend bundled with the application dependencies
Add a vercel.json to increase the function timeout if needed:
{
"functions": {
"app/api/convert/route.ts": {
"maxDuration": 60
}
}
}If deploying in a container, make sure the image can install native Node modules during npm install.