Next.js Pages Router — How Routing works?

It is always good to understand first why Next.js is popular and how it’s feature are associated. If you don’t understand why is next.js, click here

What is Next.js

Let’s Understand Routing with Real-life example by continuing app BookNook we started in our previous blog What is Next.js.

Introduction: Meet Alex

Meet Alex, a web developer tasked with creating a modern web application for a local bookstore called “BookNook.” The bookstore wants an online presence that allows users to browse books, read reviews, and make purchases. The site needs to be fast, easy to navigate, and optimized for search engines to attract more visitors. With these requirements in mind, Alex decides to use Next.js, a powerful React framework that simplifies the development of server-rendered applications. In this blog, we’ll explore how routing works in Next.js, focusing on the App Router, through Alex’s journey building the BookNook app.

Step 1: Setting Up the Project

Alex starts by setting up a new Next.js project. The setup is straightforward, and within minutes, he has a working development environment. The folder structure is clean, with dedicated directories for pages, components, and API routes. This structure helps…