Share on LinkedInShare on PinterestShare on Youtube

Table of Contents

  • Introduction
  • The NextJS router object
  • References

Introduction

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();

References

  • “Routing: Introduction.” Next.js, https://nextjs.org/docs/routing/introduction. Accessed 6 July 2022.
  • “next/router.” Next.js, https://nextjs.org/docs/api-reference/next/router. 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.