TLDR Web Dev · ARTICLES & TUTORIALS
HOW TO TAKE SCREENSHOTS OF YOUR STATICALLY EXPORTED NEXT.JS SITE IN GITHUB ACTIONS WORKFLOW
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.