Routing in an application is the ability to change urls and go from one page to another. It’s a major component in any web application. Thankfully, Next.js comes with a built-in logic concerning routing.

This tutorial will be focusing on static routing and cover:

• How to create routes in Next.js
• Index Routes (such as /)
• Static Routes (/about)
• Nested Static Routes (/products/new_arrivals)
• How to navigate between pages and pass query parameters with:
• Next.js Link Component
• useRouter Hook
• withRouter HOC

To better illustrate this concept, I will be using the example of an online store. This store will have three pages: Home, About and New Arrivals. We will be going over the different ways how to implement routing between them. Here is the end result!

The end result

#next #react #javascript #web-development #developer