Unlocking Seamless Navigation: A Deep Dive into Next.js App Router & Page Router

What is a Router?

A router is a mechanism that manages the navigation flow within a website. When you type a web address, it decides which page to show you. Instead of reloading the whole page every time you click something, it just updates the part you’re looking at. This makes browsing quicker and smoother. In server-side applications, the router loads the entire page, but in client-side applications, it loads without refreshing the page.

Example: Suppose we have a blog website. When a user clicks on a link to view a specific blog post, the router ensures that the corresponding post content is navigated to the blog page.

Why Do We Need a Router?

Routers are essential for creating single-page applications (SPAs) and providing a smooth user experience. They enable:

1. Dynamic Content Loading: Routers fetch and render content dynamically based on the URL, allowing users to navigate between pages without reloading the entire application in client-side application.
2. Bookmarking and History Management: Routers maintain the browser’s history and enable users to bookmark specific pages, enhancing usability.
3. SEO Optimization: Modern routers, especially on the server-side, can render content that is SEO-friendly, improving search engine visibility.

Example: In an e-commerce website, a router ensures that users can easily navigate between product listings, view product details, and proceed to checkout.

App Router in Next.js

Next.js provides an app router that simplifies route management by following a convention based on the file system. Developers create pages by adding React components to the /src/app directory, and Next.js automatically generates routes based on the file structure.

Example: Suppose you have a Next.js project with the following structure:

/src
  /app
    /page.js                -----> http://localhost:3000/
    /about/page.js.         -----> http://localhost:3000/about
    /blogs
      /page.js              -----> http://localhost:3000/blogs
      /[slug]/page.js.      -----> http://localhost:3000/blogs/some-blog-id

• page.js corresponds to the home page.
• about.js represents the About Us page.
• /blogs/[slug].js generates dynamic routes for individual blog posts based on their slugs.

Page Router in Next.js

In Next.js, routing is handled through a system called the “file system routing.” This means that the file structure in your pages directory automatically defines the routes for your application. Each file inside the pages directory becomes a route in your application.

pages/
| - index.js
| - about.js
| - contact.js
| - products/
    | - index.js
    | - product1.js
    | - product2.js
| - blogs/
    | - [id].js

In this case, you’d have routes:

• http://localhost:3000/ mapped to index.js
• http://localhost:3000/about mapped to about.js
• http://localhost:3000/contact mapped to contact.js
• http://localhost:3000/products mapped to products/index.js
• http://localhost:3000/products/product1 mapped to products/product1.js
• http://localhost:3000/products/product2 mapped to products/product2.js
• http://localhost:3000/blogs/:id mapped to blogs/[id].js

App Router VS Page Router in Next.js

App-based routing:

• App in Next.js: With app-based routing, each React component in page.js you create in the /src/app/ directory automatically becomes a route in your application.
• Manual Route Definition: You define routes within your application and specify which components should render based on the current URL.
• Control and Flexibility: Offers greater control over routing logic, making it suitable for applications with complex navigation requirements, including nested routes, route guards, and custom transitions.
• Scalability: Well-suited for larger applications where scalability and maintainability are crucial, as it allows for more granular control over routing behaviour.

Page-based routing:

• Pages in Next.js: With page-based routing, each React component you create in the /pages directory automatically becomes a route in your application.
• Automatic Route Setup: There’s no need for explicit route configuration; simply create new components, and they are accessible via URLs.
• Simplicity: Ideal for smaller to medium-sized applications with straightforward navigation structures, as it simplifies development and reduces boilerplate code.
• Developer-Friendly: Offers a streamlined development experience, allowing developers to focus more on building components rather than managing routes.

Conclusion

Routers are integral to modern web development, providing efficient navigation and dynamic content loading. In Next.js, the app router simplifies route management by following a file-based convention, while the page router enables seamless navigation between pages within the application. Understanding and effectively utilizing these routers is crucial for building responsive and user-friendly web applications.

Happy coding!

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
• More content at PlainEnglish.io