How To Create A Multi-Page Website With Next.js

Next.js is a framework of React that helps to build production-ready web applications. You might get confused a bit while reading this title. Because we know that React.js is designed to build Single Page Applications(SPA). Here we will discuss the steps to create a multi-page website with Next.js

We need to note that, here in this article we are discussing creating a next.js app with multiple routes instead of multiple pages. But for the user, it feels the same as multiple pages.

Note:- An article in Itnext.io is explaining the steps to integrate React.js on a Multi-Page website.

Here we are going to create 3 routes /, /about, and /contact which renders its corresponding components. From in user’s perspective, it feels the same as opening the corresponding page for each route.

Route	Corresponding page
/	Home page
/about	About page
/contact	Contact page

The below GIF will make you understand the exact idea about the view and working of this app.

Video tutorial

If you would like to follow a video guide, the below youtube link will help you to cover up the entire steps in less than 5 minutes.

Create a Next.js application

First, we need to create a Next.js application using the NPX tool. Don’t worry about NPX, because it’s a tool coming with NPM(Node Package Manager) 5.2+ onwards.

So, after a successful installation of Node.js, create a Next.js application using NPX.

npx create-next-app next-multi-page-website

This command will create a react application with the project name next-multi-page-website.

Now enter the project directory and start the app.

cd next-multi-page-website
npm run dev

It will open up the Next application we have created in our browser window with the address https://localhost:3000.

If you need further assistance in this step, I wrote an article to install and set up a Next.js app on Windows 10.

Building the route components/pages

After creating a new Next.js project, we need to create route components. When coming to Next.js, we usually call them pages.

Anyways, when accessing the routes, these components must render.

So we need to create an about.js, contact.js, and an index.js file inside the pages directory.

The complete file structure of the app we have built is shown below.

About page

This component is rendered when accessing the /about the route. It consists of a title and a description. We also added a CSS file to style the component.

So, create an about.js file inside the pages directory and add the below code.

// pages/about.js

import React from "react";
import styles from '../styles/About.module.css'

export default function About(){
    return(
        <div className={styles.container}>
            <h2 className={styles.title}>About Page</h2>
            <p className={styles.description}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    )
}

Also, create an About.module.css file inside the styles directory.

// styles/About.module.css

.container {
    text-align: center;
    padding: 10rem;
}
.title {
  font-size: 2rem;
}
.description {
    font-size: 1rem;
    line-height: 2rem;
  }

Contact page

Now create a contact component inside the pages directory to render when accessing the /contact route.

// pages/contact.js

import React from "react";
import styles from '../styles/Contact.module.css'

export default function Contact(){
    return(
        <div className={styles.container}>
            <h2 className={styles.title}>Contact Page</h2>
            <div className={styles.details}>
                <li className={styles.list}>
                <label className={styles.label}>Name:</label>
                <p className={styles.value}>Lorem</p>
                </li>
                <li className={styles.list}>
                <label className={styles.label}>Email:</label>
                <p className={styles.value}>[email protected]</p>
                </li>
            </div>
        </div>
    )
}

Also the style for the contact component Contact.module.css.

// styles/Contact.module.css

.container {
    text-align: center;
    padding: 10rem;
}
.title {
  font-size: 2rem;
}
.details {
  border: 1px solid #dadada;
  border-radius: .25rem;
  padding: 2rem;
}
.list {
  list-style: none;
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.label {
    font-size: 1rem;
    color: rgb(66, 66, 66);
  }
.value {
  font-size: 1rem;
  margin: 0;
  margin-left: 1rem;
}

Home page

This component we are going to create is rendered when accessing the / route. So that, this is the home page.

// pages/index.js

import Link from "next/link"
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>

      <main className={styles.main}>
        <h2 className={styles.title}>
          Multi-page website using Next.js
        </h2>

        <div className={styles.grid}>
          <Link href="/" >
            <a className={styles.card}>
            <h2>Home &rarr;</h2>
            </a>
          </Link>

          <Link href="/about" >
          <a className={styles.card}>
            <h2>About &rarr;</h2>
            </a>
          </Link>

          <Link
            href="/contact"
            
          >
            <a className={styles.card}>
            <h2>Contact &rarr;</h2>
            </a>
          </Link>

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

Also the style file Home.module.css for styling the home page.

// styles/Home.module.css

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}



.title {
  margin: 0;
  line-height: 1.15;
  font-size: 2rem;
}



.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 800px;
  margin-top: 3rem;
}

.card {
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  width: 45%;
}

.card:hover,
.card:focus,
.card:active {
  color: #0070f3;
  border-color: #0070f3;
}

.card h2 {
  font-size: 1.5rem;
}


@media (max-width: 600px) {
  .grid {
    width: 100%;
    flex-direction: column;
  }
}

Add some global style

To add global CSS styles, we can create the CSS file inside the styles directory and import it from the _app.js file.

// styles/global.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
* {
  box-sizing: border-box;
}

// pages/_app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Codesandbox

Refer to the CodeSandbox link to view the live app.

https://codesandbox.io/s/prod-bush-2goj6

GitHub

You can always refer to the GitHub repository to clone this project.

https://github.com/syamjayaraj/next-multi-page-website

Summary

So, in this article, we have discussed the steps for creating a multi-page website using Next.js. Actually, it is a multi-component website but works the same as a multi-page. I also included the GitHub repository URL where you get the complete project for reference.