Routing

Learn how to create routes and navigate to different pages in our application.

We'll cover the following

What is routing?

Routing is one of the fundamentals of Next.js. It’s also one of the things that Next.js provides out of the box. Let’s take a look at how we can create and manage new routes in our Next.js applications.

Creating pages

We know that the /pages folder of a Next.js application is where all our pages exist. Next.js automatically creates a route for all the files present in the /pages directory. Both the files and folders are mapped to routes in our applications. A few key things to note are:

  • The index.js file is mapped to / for each folder. For example:

    • /pages/index.js is mapped to /.

    • /pages/collections/index.js is mapped to /collections.

  • The route created for a file has the same name as the file. For example:

    • /pages/about.js is mapped to /about.

    • /pages/collections/collection1.js is mapped to /collections/collection1.

  • Next.js comes with a default 404 Not Found page. Any path that does not have a corresponding file will show this 404 page.

Let's test this out in the code widget below. We've already placed some files in the /pages folder. We can navigate to them by appending their path to the end of the URL.

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;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}
Created files and routes in Next.js

You can try guessing the corresponding paths for the files in the /pages folder.

Navigating between pages

Now, let’s discuss how we can use a Next.js component to route between pages without having to type the URL in the browser so we can avoid bad user experience in our application.

Next.js comes with a Link component that can be used for client-side transitions between the pages created in the application. Link is a React component that can be imported form next/link. The route to be transitioned to can be passed to the Link component via its href attribute.

We can also use buttons to route to pages in the application using the next/router component. We can import the { useRouter } from the next/router component and push routes to the router stack of the browser. Now that we have learned about Next.js, we can clearly understand how it differs from React routing. In React, we had to create routes for our components using the react-router library and add code whenever we required a new page. With Next.js, we can simply create the file, generating the route automatically.

Let’s create a navbar for our application and use it for routing. For this, we’ll create a /components folder in our root directory and have a Header.js file that exports an appbar to our pages.

import React from 'react'
import Link from 'next/link';
import styles from '../styles/Header.module.css'
import { useRouter } from 'next/router';

const Header = () => {
  const router = useRouter();

  const handleHomeRoute = () => {
    router.push('/')
  }

  return (
    <div className={styles.container}>
      <div 
        className={styles.link}
        onClick = {handleHomeRoute}
      >
        Home
      </div>
      <div className={styles.linkContainer}>
        <div className={styles.link}>
          <Link href='/about'>About</Link>
        </div>
        <div className={styles.link}>
          <Link href='/collections'>Collections</Link>
        </div>
        <div className={styles.link}>
          <Link href='/collections/collection1'>Collection1</Link>
        </div>
      </div>
    </div>
  )
}

export default Header;
Create a Header component to move between routes

The router we created with the useRouter() function is capable of pushing routes into the browser’s router stack. This is so we can go to a new route and also use the router’s back button to come back to the page we were on previously. It’s used in line 10 of our components/Header.js file in the code above. One way to navigate a user to a specific rout is by using the router.push() method to add the desired route to the stack and route the user accordingly.

With the Link component and the useRouter() function, we have everything we need to navigate between pages in a Next.js application.