---
title: Deploying Puppeteer with Next.js on Vercel
description: This guide covers setting up Puppeteer with Next.js on Vercel for headless browser automation, featuring a practical example for generating web page screenshots efficiently.
url: "https://vercel.com/kb/guide/deploying-puppeteer-with-nextjs-on-vercel"
published: 2025-11-03
last_updated: 2025-11-10
authors: Gabe Nuñez
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

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**](/templates/template/puppeteer-on-vercel)

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

## Related Documentation

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

## More Next.js guides

- [Build an AI Chat Agent with Weather API Tool Calling](/kb/guide/build-ai-agent-weather-api): Build an intelligent conversational agent that fetches real-time weather data using the AI SDK, tool calling, and a backend weather API powered by Express, FastAPI or Nitro
- [Human-in-the-Loop with Chat SDK and Workflow SDK](/kb/guide/human-in-the-loop-with-chat-sdk-and-workflow-sdk): Combine Chat SDK and Workflow SDK to suspend workflows on approval cards in a chat platform, then resume on click via createWebhook.
- [Build with Vercel Blob on Next.js](/kb/guide/vercel-blob-nextjs): Deploy the Vercel Blob Next.js Starter and learn how client uploads store images securely in a private Blob store.

## Reference Architecture

Choose a stack and work through the decisions behind it, with curated documentation, guides, templates, and courses to help you build.

- [Agent stack](/kb/architecture/agents): Build and operate agents with models, tools, and durable workflows.
- [Web applications](/kb/architecture/web): Choose rendering, data, authentication, and caching approaches.
- [Backends](/kb/architecture/backends): Choose a runtime, connect services, and run background work.

[Browse all stacks](/kb/architecture)

## Build with prompts

Build an app, extend an agent, or improve your project with ready-to-use prompts for your coding agent.

[Browse the prompt library](/kb/prompts) · [Read the Markdown index](/kb/prompts.md)