---
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: /kb/guide/deploying-puppeteer-with-nextjs-on-vercel
canonical_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
related: []
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [NestJS](https://vercel.com/docs/frameworks/backend/nestjs?from=related) — Deploy NestJS applications to Vercel with zero configuration.
- [Vercel Deployment Guide](https://ai-sdk.dev/docs/advanced/vercel-deployment-guide?from=related)
- [How to Deploy a Vue.js Site with Vercel](https://vercel.com/kb/guide/deploying-vuejs-to-vercel?from=related) — Create your Vue.js app and deploy it with Vercel.
- [Deploy a headless BigCommerce storefront with Vercel](https://vercel.com/kb/guide/deploy-headless-bigcommerce-storefront-with-vercel?from=related) — Deploy a headless BigCommerce storefront using Catalyst and Next.js on Vercel
- [Using Express.js with Vercel](https://vercel.com/kb/guide/using-express-with-vercel?from=related) — Learn how to use Express.js in a Serverless environment.
- [Integrate Vercel and Contentstack for your Headless CMS](https://vercel.com/kb/guide/integrate-vercel-and-contentstack?from=related) — Integrate Vercel with Contentstack, a headless CMS, to build and deploy dynamic, high-performance websites.
- [How to Deploy an Ember App with Vercel](https://vercel.com/kb/guide/deploying-ember-with-vercel?from=related) — Create an Ember app and deploy it live with Vercel.

Full cross-link map for this page: [/kb/guide/deploying-puppeteer-with-nextjs-on-vercel.graph.md](/kb/guide/deploying-puppeteer-with-nextjs-on-vercel.graph.md)
<!-- /docsgraph:related -->


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.