TLDR Web Dev · ARTICLES & TUTORIALS

HOW TO TAKE SCREENSHOTS OF YOUR STATICALLY EXPORTED NEXT.JS SITE IN GITHUB ACTIONS WORKFLOW

nico.fyi6 min read

Summary from the TLDR Web Dev newsletter

GitHub Actions can be used to automatically take screenshots of a statically exported Next.js website during pull requests, solving the problem of not having preview deployments when hosting on GitHub Pages. The solution uses a Node.js script using Puppeteer to find all HTML pages in the built Next.js app, serve them locally, and capture full-page screenshots while handling lazy-loaded images and animations. The screenshots are then uploaded as GitHub Actions artifacts.