Catch Next.js Hydration Errors With Playwright Tests
Playwright can catch Next.js hydration errors by listening for browser console failures and then exercising an interaction that only works after React has attached its event handlers. This detects pages that return 200 OK and display server-rendered content but fail when a customer clicks, types, or navigates. Next.js defines hydration as React attaching event handlers to the server-rendered HTML.