@Australian Freshwater Crocodile I have some experience with Next.js
As for my experience, hydration error is not problem when develop project.
If your project can be built without any issue, hydration error is not problem and It will be deployed successfully.

your error is just like this?

@Asian black bear I have an error like this

This is the tricky part of the code that causes this:

<script>
document.addEventListener('DOMContentLoaded', function () {
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
document.body.insertBefore(div1, document.body.firstChild);
document.body.insertBefore(div2, div1.nextSibling);
});
</script>

@Australian Freshwater Crocodile there?

try with this code

<script
dangerouslySetInnerHTML={{
__html: document.addEventListener('DOMContentLoaded', function () { var div1 = document.querySelector('.div1'); var div2 = document.querySelector('.div2'); console.log("----->", document.body.firstChild) document.body.insertBefore(div1, document.body.firstChild); document.body.insertBefore(div2, div1.nextSibling); });
}}
/>

Add the suppressHydrationWarning prop to affected html elements

https://react.dev/reference/react-dom/hydrate#suppressing-unavoidable-hydration-mismatch-errors

Do not ignore hydration errors. Either suppress it or fix it.

@joulev thanks! So I need to add this prop to EACH element?

I'm more than happy to fix these errors, the problem that it's too difficult to understand them, especially if the problem is in amount of whitespaces between server and client and the DOM manipulations are made by third-party scripts. I thought maybe there is some universal approach of handling these cases so third-party scripts could go as nuts as they want?

If your third party script can affect the entire dom tree, yes you’ll need to add the prop to all elements. But as you can tell, probably you need to rewrite such scripts to react or not use react. Otherwise, react does not know about changes to the elements made by the third party library and unexpected behaviours/bugs will inevitably come. This same reason is why you are not supposed to use jquery with react, for example.

If your script only affects one part of the application (e.g. it produces a text editor inside your app), then you can simply render an empty <div /> or similar on react’s side. Basically, structure the app so that react doesn’t need to care about whatever happens inside the third party script since it only affects an empty <div /> that react doesn’t need to update.