Puppeteer is a powerful Node.js library that provides a high-level API to control headless Chrome or Chromium. It's incredibly useful for automating browser tasks like generating screenshots, creating PDFs, and scraping websites. Running Puppeteer in a serverless environment like Vercel, however, requires specific configuration to work within the platform's constraints.

This guide provides a general walkthrough for deploying a Next.js application with Puppeteer to Vercel. We will use a screenshot generator as a practical example to demonstrate the key concepts.

## Prerequisites

- A Vercel account.
- Node.js and npm (or a similar package manager) installed on your local machine.
- Basic knowledge of Next.js and TypeScript.

## Key Concepts for Puppeteer on Vercel

To successfully run Puppeteer in a Vercel Function, you must address the function bundle size limitation (250MB). The standard `puppeteer` package is too large. The solution involves two key packages:

- `puppeteer-core`: A lightweight version of Puppeteer that doesn't bundle its own browser.
- `@sparticuz/chromium-min`: A minimal, community-maintained version of Chromium that is small enough to fit within Vercel's limits.

## Getting Started

We've created a ready-to-use template that handles all the configuration for you:

[Deploy the Puppeteer on Vercel Template](/content/templates/template/puppeteer-on-vercel/index.html)

This template comes pre-configured with all the necessary packages and settings to run Puppeteer on Vercel.

### Related documentation

- [Next.js](/content/docs/frameworks/full-stack/nextjs/index.html)
- [Vercel Functions](/content/docs/functions/index.html)