Share on LinkedInShare on PinterestShare on Youtube

Table of Contents

  • Introduction
  • The NextJS router object
  • References


NextJs has a file-system based router built on the concept of pages. When a file is added to the `pages` directory, it’s automatically added as a route. This includes nested routes. With the exception of files of the name index, the route should match the folder structure with the pages directory.

A good place to start would be NextJs’ Link component. This component allows you to do client-side transitions and works a lot like an anchor tag. 

To use it, you can import it like any other component at the top of your source file (i.e. js/ts):

import Link from ‘next/link’


<Link href=”/”><a>Home</a></Link>

The NextJS router object

The NextJs router object can be accessed using the useRouter hook. Just import useRouter like any other component at the top of your source file:

import { userRouter } from ‘next/router’

And then to access the router object, you can do the following:

const router = useRouter();


  • “Routing: Introduction.” Next.js, Accessed 6 July 2022.
  • “next/router.” Next.js, Accessed 6 July 2022.
Mensah Alkebu-Lan

About The Author

With 15+ years of experience in designing, developing, and maintaining JVM-based applications, ensuring seamless delivery of various IT projects, and successfully creating and executing software applications. Mensah also possesses strong expertise in leveraging Agile/Scrum methodologies, producing detailed technical documentation, and designing optimal software solutions.