Day 53 of #100DaysOfCode — Routing (App Router)

Routing is one of the most fundamental concepts in any web application. It determines how users move between different pages and how those pages are structured. In Next.js, routing has evolved significantly with the introduction of the App Router, which uses a file-based system to make navigation more intuitive, scalable, and powerful, all without needing external libraries. Today, for day 53, the goal was to understand routing in Next.js App Router Mental Model In Next.js App Router: Folders = Routes Files = UI + Behavior 👉 Your project structure defines your entire routing system. No need for separate route configuration like in traditional React apps. Core File Conventions (Built-in Superpowers) Next.js gives you powerful features just by naming files correctly. page.js Defines a route Required to make a route accessible Example: app/about/page.js → /about layout.js Shared UI (Navbar, Footer, Sidebar) Wraps all child routes automatically 👉 Layouts can be nested, which is extremely