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 react-router npm library to enable and configure routes

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

NextJS Routes types

NextJS routes works similar to how files accessed from a a file system.

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

Each new page in pages folder is an 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 application path(/) i.e http://localhost:3000. It is also called indexed route

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

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

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

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

  • employee/view.tsx: mapped with path (employee/view) and accessable 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 as nested route.

From 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,edit.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 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 about.tsx:

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

next, Create another react component ie. 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 does prefetch the linked resource during mouse over or loading.

Import Link in your page component.

import Link from 'next/link'

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