
How to capture a full-page screenshot of a React or Next.js app
How to Capture a Full-Page Screenshot of a React or Next.js App Screenshotting a React app with Puppeteer has a timing problem: you navigate to the URL, but the page is still hydrating, fetching data, and rendering. Most Puppeteer scripts add a sleep(2000) and hope for the best. Sometimes it works. Here's a more reliable approach: render the page, wait for a stable selector, screenshot it — all from a Next.js API route or a Node.js script, without running a browser. Next.js App Router — screenshot API route // app/api/screenshot/route.ts import { NextRequest , NextResponse } from " next/server " ; export async function POST ( req : NextRequest ) { const { url , selector , fullPage = true } = await req . json (); const res = await fetch ( " https://pagebolt.dev/api/v1/screenshot " , { method : " POST " , headers : { " x-api-key " : process . env . PAGEBOLT_API_KEY ! , " Content-Type " : " application/json " , }, body : JSON . stringify ({ url , fullPage , blockBanners : true , blockAds
Continue reading on Dev.to JavaScript
Opens in a new tab


