A workaround to get screenshots from a url on nextjs

get-screenshot.js

/**
* This is an api file.
* You will need import 'puppeteer' on local env and 'puppeteer-core' on production env.
* for that, you can import both in a file and export based on process.env.NODE_ENV like this:
*
import puppeteerProd from 'puppeteer-core';
import puppeteerDev from 'puppeteer';

export default process.env.NODE_ENV === 'production'
  ? puppeteerProd
  : puppeteerDev;
*/

import { _handleError } from '../../utils/utils';
import puppeteer from '../../utils/puppeteer';
import chrome from 'chrome-aws-lambda';

export default async (req, res) => {
  try {
    const browser = await puppeteer.launch(
      process.env.NODE_ENV === 'production'
        ? {
            args: chrome.args,
            executablePath: await chrome.executablePath,
            headless: chrome.headless,
          }
        : {},
    );
    const page = await browser.newPage();
    page.setUserAgent(
      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:86.0) Gecko/20100101 Firefox/86.0',
    );
    await page.setViewport({
      width: 1920,
      height: 1080,
    });

    await page.goto(req.query.url || 'https://amazon.com');
    const screenshot = await page.screenshot({
      encoding: 'base64',
    });

    await browser.close();
    res.json({ blob: `data:image/jpeg;base64,${screenshot}` });
  } catch (error) {
    console.log(error);
    _handleError(res);
  }
};

pupeeteer.js

import puppeteerProd from 'puppeteer-core';
import puppeteerDev from 'puppeteer';

export default process.env.NODE_ENV === 'production'
  ? puppeteerProd
  : puppeteerDev;

ScreenshotComponent.js

/**
* you can call the api route with fetch and will return the base64 blob as json.
* you can use it on a <img /> tag like so:
*/
import { useEffect, useState } from 'react';

export const WebScreenshot = ({ url }) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(`/api/get-screenshot${url ? `?url=${url}` : ''}`)
      .then((res) => res.json())
      .then((res) => setData(res.blob))
      .catch((err) => console.log(err));
  }, []);
  return (
    <div>
      {!data ? <p>Loading...</p> : <img src={data} />}
    </div>
  );
};

@lccarrier @realityzero hi, this gist is from Apr 3, 2021. Lot of things has changed since then. It doesn't work anymore