Does anyone knows effective way to make HTML template (which has bunch of 3rd party js files and css files) compatible with new NextJS 14 App rounter?

I seen all tutorials, blogs and what not but all are for old page directory no one has mentioned for new app router.

I have added all css files using import in root layout.js and added all js files in page.js using <Script src="/app/js/xyz.js"/>

But still when i open the page in browser it shows hydration ui error in console log.

Note: I also changed p tag to div tag where there are more than one element inside p tag

I had converted the simple plain HTML to JSX using online html to jsx tool.

I put all the required files ( external css files and js files ) in the public folder and imported the css in the root layout.js file AND using nextjs's Script tag i added all the required js files for example: <Script src = "/public/js/owl.music.player.js"

I was expecting that the HTML template now will be working with NextJS as well but sadly when i open the browser it shows only loading gif and bunch of console errors regarding jQuery and mainly an error of "Hydration ui"