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 from Startbootstrap. 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 the link 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-portfolio can 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 the commit

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



    npm run dev

Next.JS development server runs on localhost: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 the styles.css file inside the css/ 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 the src/pages/_app.js file:

Follow along with the commit.

Back to the template folder, copy the assets folder into the Next.JS public folder.

Follow along with the commit.

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

Follow along with the commit.

Adding Custom JavaScript file to Next.JS

Next.JS has made it easier to use custom script files, using Custom **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 the commit

Adding Page Content

First, we clean the src/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 the index.html file in the template to the index.js file in our Next.JS project.

The content includes everything inside the body tag, without the scripts 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