React Hydration Diff in Next.jsApr 2024

I built the early version of the hydration error diff in 2024, easing one of the most annoying React debugging headaches in Next.js. Below are two examples from the iterated version.

Mismatch error

The server and client render different text, causing a hydration error.
Hydration failed because the server rendered text didn’t match the client.
+ Client - Server
<Home params={Promise} searchParams={Promise}>
<p>
+March 18 at 1:47 PM
−March 18 at 5:47 PM
...
app/page.tsx (12:10) @ Home
10| }).format(new Date());
11|
>12| return <p>{formattedDate}</p>;
| ^
13|}
14|

Bad HTML error

A <p> cannot contain another <p>; the browser changes the HTML before hydration.
In HTML, <p> cannot be a descendant of <p>.
This will cause a hydration error.
<Home>
<section>
<p>
><p>
nested paragraph
...
app/page.tsx (4:7) @ Home
2| return (
3| <p>Hello
>4| <p>nested paragraph</p>
| ^
5| </p>
6| );