Catch React Hydration Errors in Dev Mode

This is a Next.js project bootstrapped with create-next-app.

Hosted on Vercel

This project is up and running on https://react-hydration-error.vercel.app/

NOTE: Since we can only catch React Hydration Errors in Development Mode, its of no use to this application on the hosted website. Its just to showcase the app itself. Please follow the below steps to try this app on your local machine.

Run this project on local machine

1. First, run the development server:

npm run dev
# or
yarn dev

2. Open http://localhost:3000 with your browser to see the page.
3. After opening, you will a NextJs error popup stating the React Hydration error like below:
4. Close the error NextJs error popup as we already know its a hydration error and instead open devtools to see our custom React Hydration Error:

Learn More

To learn more about how to catch React Hydration Errors, check out my article on Medium.