How To Convert HTML templates to NextJS (v13)
This is Step-by-Step Guide on 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, it’s 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.
The template can be downloaded using the link and also cloned from the GitHub repository:
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:
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
So we’ll paste the HTML into to the site and convert it to JSX. This is the updated file:
Follow along with the commit.
Conclusion
The article gives the most important yet basic procedure to use when converting an HTML template to Next.JS