Next.js Discord

Discord Forum

How to convert ready-made paid Themeforest HTML template to NextJS app router compatible

Labrador Duck posted this in #help-forum
Open in Discord
Labrador DuckOP
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/"

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"

0 Replies