In this post, Learn how to add routes to the NextJS application. It includes different types of routes available in the NextJS Application.

If you want to configure routes in Single page applications, You have to install the routing library for that framework. React uses the react-router npm library to enable and configure routes

NextJS provides out-of-box support for Routing by default.

NextJS Routes types

NextJS routes work similarly to how files are accessed from a file system.

Each page file in the pages folder is a separate Route and file extensions are considered .tsx, .ts for the typescript app, .jsx and .js for the JavaScript app.

Each new page in the pages’ folder is a separate route.

Consider the following pages’ Folder structure

+---pages
|   |   about.tsx
|   |   contactus.tsx
|   |   index.tsx
|   |   _app.tsx
|   \---employee
|           create.tsx
|           delete.tsx
|           edit.tsx
|           index.tsx
|           view.tsx

Pages contain files and nested files in a folder. Each file is a React Component

  • index.tsx It is a home-indexed page mapped to the application path(/) i.e.http://localhost:3000. It is also called the indexed route

  • about.tsx and contactus.tsx It is a separate about and contactus pages, mapped with /about and /contactus paths. i.e http://localhost:3000/about and http://localhost:3000/contactus

  • employee/index.tsx: index.tsx component placed inside the employee folder, mapped with path (employee/) and accessible at http://localhost:3000/employee

  • employee/create.tsx: mapped with path (employee/create) and accessible at http://localhost:3000/employee/create

  • employee/delete.tsx: mapped with path (employee/delete) and accessible at http://localhost:3000/employee/delete

  • employee/view.tsx: mapped with path (employee/view) and accessible at http://localhost:3000/employee/view

  • employee/edit.tsx: mapped with path (employee/edit) and accessible at http://localhost:3000/employee/edit

components inside the employee folder are called nested route.

From the above, We can conclude that.

  • Index routes: pages are home page index.tsx and employee home page employee/index.tsx.
  • Nested Routes: employee folder that contains create.tsx,index.tsx,create.tsx,view.tsx, andedit.tsx pages.
  • Dynamic Routes: dynamic pages created with the dynamic path that contains the specific path. For example, the path is courses/{coursename} where coursename is a string of names accessible as a separate route.

So Routes does navigation between pages. So you need to link pages from one page to another on a parent page.

For example, On the Home page, We have to link about and contact pages.

Let’s Create an About page.tsx:

export default function AboutPage() {
  return <div>About Page</div>
}

next, Create another react component ie. the page contactus.tsx:

export default function ContactusPage() {
  return <div>Contact US Page</div>
}

On the home page(index. tsx), Link the about and contactus pages using link or anchor tag.

Link is a nextJS Link component that creates an Anchor tag in HTML and prefetch the linked resource during mouse over or loading.

Import the Link in your page component.

import Link from 'next/link'

The Link tag has the href attribute linked with another page.

  <Link href="/about"> About US</Link>

Which creates an anchor tag in html page as seen below

<a href="/about"> About US</a>

Here is an index page component.

import type { NextPage } from 'next'
import Link from 'next/link'

import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h3 className={styles.title}>
          Welcome to My Website
        </h3>
        <Link href="/about"> About US</Link>
        <Link href="/contactus">Contact US</Link>
        </main>
    </div>
  )
}

export default Home