const speed :string =`{"speed": 0.2}`
<div className="section jarallax h-100vh" data-jarallax={speed}
style={{backgroundImage: "url('/images/header-bg.jpg')"}}
id="home">
</div>
<Script src="./js/parallax.js" strategy="beforeInteractive" />
It throws an Error: Hydration failed because the initial UI does not match what was rendered on the server.
The error is thrown because there is a mismatch between the conponents that are affected by server-side rendering and the rest of your UI. what you could try is to remove the beforeactive attribute in the script tag.
If that doesn't help, please visit this link: https://nextjs.org/docs/messages/react-hydration-error