How to use Puppeteer in Next.js with Defer.run

defer.run is platform to run background jobs without having to worry about infrastructure.

You can think of this as a Heroku for background jobs. And it plays well with a serverless environment like Vercel.

Puppeteer works out of the box in Puppeteer without any custom configuration.

Dependency

Follow the [docs to setup] and create your first defer job in Next.js

npm install @defer/client puppeteer

Now we need to create a background function using which we can run our puppeteer workflow.

// defer/puppeteerJob.js
import { defer } from "@defer/client"
import puppeteer from "puppeteer";

async function helloPuppeteer() {
  try {
    const launchConfig = {
      headless: true,
      args: [
        "--no-sandbox", // Add this flag to disable the sandbox
        "--disable-setuid-sandbox",
      ]
    };

    const browser = await puppeteer.launch(launchConfig);

    const page = await browser.newPage();

    await page.goto("https://example.com");

    // your logic here ...
  } catch (error) {
    console.log(error);
    throw error;
  } finally {
    await browser.close();
  }
}

// the function must be wrapped with `defer()` and exported as default
export default defer(helloPuppeteer);

Reference

How to run Google Puppeteer in defer.run

Happy running workflows!