Learn Next.js by creating a static HTML webpage

Fridtjof Nystrøm — Thu, 13 Jan 2022 09:45:10 +0000

React is great! With React, it's easy to create reusable components. It easily integrates with TypeScript, it can be used for mobile development - and it has a big community.

In this post, we will create a simple website using the React framework Next.js and export the website as a static HTML webpage ready to be deployed anywhere.

👋🏼 Next.js

Next.js is a framework on top of React that enables server-side rendering and static website generation. It comes with a lot of useful features, such as Image Optimization and SEO-friendly routing. We won't go into much detail on these topics, but you may want to check out Next.js' documentation if you find these topics interesting.

Let's create our first Next.js app

Let's head right in and initialize the project using create-next-app. Open your terminal and create a Next environment using the command below:

npx create-next-app@latest --typescript

Type in your project name, and watch the magic happen. To start the application in development mode, enter the project folder and run:

cd my-app && npm run dev

You should now be able to visit http://localhost:3000 to see the website.

The project structure

Open the folder belonging to the project, and look at the folders in the root of the project. It should look something like this:

- /node_modules
- /pages
  - /api
  - index.js
- styles

The pages folder

The pages folder equals to the routes of your webpage. http://localhost:3000 redirects to /pages/index.tsx. To create a new route, create a new file in the pages folder. For example, a /pages/about.tsx file would create the route http://localhost:3000/about.

index.tsx

Let's simplify the front page a little bit. Open index.tsx, and replace the file content with the code below:

import type { NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Home</title>
        <meta name="description" content="My own personal static html page" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to index.tsx!
        </h1>
        <p>This is a static HTML website built with React & Next.js </p>
        <div className={styles.grid}>

          <Link href="/people/me">
            <a className={styles.card}>
              <h2>About me</h2>
              <p>Click here to navigate to people/me.</p>
            </a>
          </Link>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn more about Next.js!</p>
          </a>

        </div>
      </main>
    </div>
  )
}

export default Home

Navigate to http://localhost:3000. The page should look something like this:

There is a Link to people/me. The Link component takes care of page routing within the website. Right now, the link redirects to a 404 page. That's because the people/me page is missing from the application. Let's go ahead and create that file.

People/me

Paste the following code into pages/people/me.tsx. Feel free to change anything, for example the name.

import type { NextPage } from 'next'
import Head from 'next/head';
import Link from 'next/link';
import styles from '../../styles/Home.module.css'

const Me: NextPage = () => {
    return (
        <div className={styles.container}>
            <Head>
                <title>People - Me</title>
                <meta name="description" content="Page about me" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main className={styles.main}>
                <h1>
                    Hello, my name is Fridtjof! 👋🏼
                </h1>
                <p>
                    Nice to meet you!
                </p>
                <Link href="/" >
                    <a className={styles.card}> 
                        Navigate to the frontpage
                    </a>
                </Link>
            </main>
        </div>
    )
}

export default Me

Enter http://localhost:3000/people/me, and watch your website render. With this two-paged masterpiece finished, it is now time to share your masterpiece with the world. It's time to build!

Create the static HTML

Before you can deploy your website as a static website, it must be built and exported. To do so, change the build script in package.json to also export the project.

"build": "next build && next export"

Make sure that you've saved your latest changes, then run:

npm run build

When the script is done, a new folder named out will appear within the project. To deploy the code, copy the content of the out folder to any web hotel or bucket, just as you would with any static HTML website.

Congratulations! You now have your very own static website, created with React components that you can deploy anywhere. Note that this post only touches the surface of Next.js. To use Next.js for a simple page like the one we built is totally overkill, but it is a nice introduction. In a future post, we will look further into the advantages of using Next.js.

Forem: Fridtjof Nystrøm