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

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

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

Note:- An article on Itnext.io explains the steps to integrate React.js into a multipage. website.

Here we are going to create 3 routes /, /about, and /contact that represent their corresponding components From the user’s perspective, it feels like opening the corresponding page for each path.

PathCorresponding Page

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

Video tutorial

If you want to Following a video guide, the following YouTube link will help you cover all the steps in less than 5 minutes.

Create a Next.js application

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

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

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

This command will create a reaction app with the project name next-multi-page-website.

Now enter the project directory and start the application.

cd next-multi-page-website npm execute dev

The following application that we have created will open in our browser window with the address https://localhost:3000.

If you need more help, In this step, I wrote an article to install and configure a Next.js app on Windows 10.

Build the components/pages of the route a

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

Anyway, when accessing routes, these components need to be displayed.

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

The complete file structure of the application that they have built is shown below.

About Page

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

Then, create an about.js file inside the pages . directory and add the following code.

// pages/about.js import React from “react”; import styles from ‘../styles/About.module.css’ export default function About(){ return(

) }

Also, create a About. module.css inside the e directory styles.

// styles/About.module.css .container { text-align: center; stuffing: cast off 10; } .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 path.

// pages/contact.js import React from “react”; import styles from ‘../styles/Contact.module.css’ export default function Contact(){ return(

) }

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

// styles/Contact.module .css . container { text-align: center; stuffing: cast off 10; } .title { font-size: 2rem; } .details { border: 1px solid #dadada; edge-radius: .25rem; filling: cast off 2; } .list { list style: none; flexible screen; justify-content: center; lower margin: 1 rem; } .label { font-size: 1rem; colour: rgb(66, 66, 66); } .value { font-size: 1rem; margin: 0; left margin: 1rem; }

Home Page

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

// pages/index.js import link from ‘next/link’ import styles from ‘../styles/Home.module.css’ default export function Home() { return (

) }

Also the Home.module.css style file to style the home page.

// styles/Home.module.css .container { min-height: 100vh; padding: 0 0.5 bind off; flexible screen; flexion direction: spine; justify-content: center; align elements: center; height: 100wh; } .main { padding: 5rem 0; flexion: 1; flexible screen; flexion direction: spine; justify-content: center; align elements: center; } .title { margin: 0; line height: 1.15; font size: 2rem; } .grid { display: flex; align elements: center; justify-content: center; flexible casing: casing; max width: 800px; top margin: 3rem; } .card { margin: 1rem; padding: 1.5 rem; text alignment: left; color: inherit; text-decoration: none; border: 1px solid #eaeaea; border-radius: 10px; transition: color 0.15 s ease, edge-color 0.15 s 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%; flexion direction: spine; } }

Adding a global style

To add global CSS styles, we can create the CSS 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 size: border box; } // pages/_app.js import ‘../styles/globals.css’ function MyApp({ Component, pageProps }) { return } export default MyApp

Codesandbox

Check the CodeSandbox link to see the live app.

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

GitHub

You can always check 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 to create a multi-page website using Next.js. It’s actually a multi-component website, but it works the same as a multi-page one. I’ve also included the URL of the GitHub repository where you get the full project for reference.

.