Posted onApr 23, 2023 • Originally published atchrisdevcode.hashnode.dev onFeb 22, 2023

How To Convert HTML templates to NextJS (v13)

Now that Next.JS is an awesome frontend tool. How can we get HTML/CSS/JS Templates to work perfectly in a Next.JS project? This article will take you through the steps.

Requirements

To fully grasp the content, its highly recommended that you have the following tools installed on your development environment:

NodeJS
Text Editor (Maybe VIM?)
Basic React.js and Next.JS knowledge

Finding a Template

For the demo, we will use one of the open-sourced templates fromStartbootstrap. We will use the Freelancer theme, a perfect template for a personal portfolio website.

https://startbootstrap.com/theme/freelancer

The template can be downloaded using thelink and also cloned from the GitHub repository:

https://github.com/startbootstrap/startbootstrap-freelancer

Note: Feel free to use any template.

Creating a Next.JS Project

To start a new project, open up a command line application and run the script:

    npx create-next-app@latest my-portfolio

Note:my-portfoliocan be replaced with the name of the project.

Note that we get some prompts for Next.JS configuration:

     Would you like to use TypeScript with this project? No / Yes     Would you like to use ESLint with this project? No / Yes     Would you like to use src/ directory with this project? No / Yes     Would you like to use experimental app/ directory with this project? No / Yes     What import alias would you like configured? @/*

Follow along with thecommit

After the installation, run the development server using the command:

    npm run dev

Next.JS development server runs onlocalhost:3000

The HTML Template Structure

The HTML template consists of the basic HTML, CSS, and JS files.

    .     assets        favicon.ico        img            avataaars.svg            portfolio                cabin.png                cake.png                circus.png                game.png                safe.png                submarine.png     css        styles.css     index.html     js         scripts.js    5 directories, 11 files

To successfully convert the project into Next.JS, follow the steps below:

Adding CSS and Assets

Inside the template directory, copy thestyles.css file inside thecss/ folder, and paste it into the Next.JS project:src/styles.

After that, we import the styles into our project by adding the following line inside thesrc/pages/_app.js file:

Follow along with thecommit.

Back to the template folder, copy theassets folder into the Next.JSpublic folder.

Follow along with thecommit.

One final step copying the JS folder from the template directory to Next.JS public folder.

Follow along with thecommit.

Adding Custom JavaScript file to Next.JS

Next.JS has made it easier to use custom script files, usingCustom**document**

https://nextjs.org/docs/advanced-features/custom-document

The default_document.js file has the following content:

    import { Html, Head, Main, NextScript } from 'next/document'    export default function Document() {      return (        <Html lang="en">          <Head />          <body>            <Main />            <NextScript />          </body>        </Html>      )    }

To add the script, we add the following inside the body tag:

    {/* Custom JS files */}    <script    async    src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'    ></script>    {/* theme js */}    <script async src='/js/scripts.js'></script>    {/* startbootstrap forms */}    <script    async    src='https://cdn.startbootstrap.com/sb-forms-latest.js'    ></script>

The updated file will now contain:

    import { Html, Head, Main, NextScript } from 'next/document'    export default function Document() {      return (        <Html lang='en'>          <Head />          <body>            <Main />            <NextScript />            {/* Custom JS files */}            <script              async              src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'            ></script>            {/* theme js */}            <script async src='/js/scripts.js'></script>            {/* startbootstrap forms */}            <script              async              src='https://cdn.startbootstrap.com/sb-forms-latest.js'            ></script>          </body>        </Html>      )    }

Follow along with thecommit

Adding Page Content

First, we clean thesrc/pages/index.js file to contain the following:

    import Head from 'next/head'    import Image from 'next/image'    export default function Home() {      return (        <>          <Head>            <title>Freelancer Portfolio</title>            <meta name='description' content='Generated by create next app' />            <meta name='viewport' content='width=device-width, initial-scale=1' />            <link rel='icon' href='/favicon.ico' />          </Head>        </>      )    }

The next steps will be adding the page content from theindex.html file in the template to theindex.js file in our Next.JS project.

The content includes everything inside thebody tag, without thescripts tag:

https://gist.github.com/achingachris/805284613a19305a2ee98fc59bc1098e

To add the code, we have to use JSX syntax. To make our work easier, we will use a tool to convert HTML to JSX:

https://transform.tools/html-to-jsx