DEV Community

Cover image for Day 53 of #100DaysOfCode — Routing (App Router)
M Saad Ahmad
M Saad Ahmad

Posted on

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

#webdev #programming #nextjs #100daysofcode

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
Enter fullscreen mode Exit fullscreen mode

layout.js

  • Shared UI (Navbar, Footer, Sidebar)
  • Wraps all child routes automatically

👉 Layouts can be nested, which is extremely powerful for dashboards and apps.

loading.js

  • Shows loading UI while data is being fetched
  • Works with React Suspense under the hood

error.js

  • Handles runtime errors in that route segment
  • Must be a Client Component ("use client" required)

not-found.js

  • Custom 404 UI for that route segment
  • Triggered using notFound() from Next.js

👉 Key Insight:
All of this comes without installing any extra libraries.

Nested Routing (Zero Config)

Routing is automatically created from folders.

Example:

app/
  dashboard/
    page.js        → /dashboard
    settings/
      page.js      → /dashboard/settings
Enter fullscreen mode Exit fullscreen mode

👉 No need for route definitions like in React Router.

Dynamic Routes

Dynamic routing is super clean in App Router using square brackets.

Create a dynamic route:

app/blog/[slug]/page.js
Enter fullscreen mode Exit fullscreen mode

Access params:

export default function Page({ params }) {
  return <h1>{params.slug}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

👉 This replaces React Router params.

⚠️ Important Update (Accuracy Fix)

  • In Server Components → use params (as shown above)
  • In Client Components → use: 
import { useParams } from "next/navigation";
Enter fullscreen mode Exit fullscreen mode

Route Groups

Route groups help organize your code without affecting URLs.

Example:

app/
  (auth)/
    login/page.js
    register/page.js
Enter fullscreen mode Exit fullscreen mode

👉 URLs will still be:

/login
/register
Enter fullscreen mode Exit fullscreen mode

Navigation Hooks

These hooks come from:

import { useRouter, usePathname } from "next/navigation";
Enter fullscreen mode Exit fullscreen mode

useRouter()

  • Used for programmatic navigation 
router.push("/dashboard");
Enter fullscreen mode Exit fullscreen mode

usePathname()

  • Returns the current route path

⚠️ Important

👉 These hooks only work in Client Components ("use client" required)

Layout Nesting

App Router allows multiple layout levels:

  • Root Layout → app/layout.js
  • Section Layout → app/dashboard/layout.js
  • Nested Layouts → deeper levels

Example:

  • /dashboard → has its own layout
  • /dashboard/settings → inherits dashboard layout automatically

👉 This is perfect for:

  • Dashboards
  • Admin panels
  • Complex apps

Key Takeaways (Quick Recap)

  • File system = routing system
  • page.js creates routes
  • layout.js enables shared UI
  • Nested routing works automatically
  • Dynamic routes use [param]
  • Route groups organize without changing URLs
  • Navigation hooks require Client Components

Final Thoughts

The Next.js App Router simplifies routing by turning your folder structure into a powerful system. Once you understand the core conventions, building scalable and well-structured applications becomes much easier.

“Folders = Routes, Files = Behavior”

Thanks for reading. Feel free to share your thoughts!

Top comments (0)