Next.js Routing — Complete Guide (App Router)

Overview: What Is the Next.js Router?

The Next.js Router is the system responsible for:

Mapping URL paths → React components
Handling navigation between pages
Defining layouts, loading UI, error states, dynamic routes, API endpoints, and more

The router is file-system–based, meaning:

The folder and file names inside app/ (or pages/) decide your routes.

Starting from Next.js 13, the recommended system is the App Router, which brings:

Server Components
Nested layouts
React Suspense
Streaming
Route handlers
Server Actions
Enhanced data fetching

App Router vs Pages Router

Feature	Pages Router (`pages/`)	App Router (`app/`)
Component Type	Only Client Components	Server + Client Components
Routing	Next.js custom router	React Server Components routing
Layouts	Single layout per app	Nested Layouts (per folder)
Data Fetching	`getServerSideProps`, etc.	Async components, `fetch()`
Server Actions	❌ Not supported	✔️ Supported
API Routes	`/pages/api`	`/app/api` (Route Handlers)
Streaming	Limited	✔️ Built-in streaming & suspense
Recommended?	❌ Legacy	✔️ Modern, recommended

Why We Use App Router

More scalable architecture
Easier to manage complex layouts
Better performance with RSC
Cleaner data-fetching
Built-in server-side capabilities
Supports features like parallel routes, intercepting routes, etc.

Basic Example Setup (App Router)

Your project must have:


app/
  layout.tsx
  page.tsx

Example: `layout.tsx`


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Example: `page.tsx`


export default function HomePage() {
  return <h1>Hello from Home</h1>
}

Routing:

/ → app/page.tsx

All File Types in App Router (What & Why)

File	Purpose
page.tsx	Defines a route UI (required to create a route)
layout.tsx	Persists UI across child routes (navigation bars, shared UI)
template.tsx	Similar to layout but rerenders per navigation
loading.tsx	Automatically shown during page/data loading
error.tsx	Error boundary for the route
not-found.tsx	For 404 UI inside this route tree
route.ts	API endpoint (replaces `/pages/api`)
default.tsx	Default rendering for parallel route slots
head.tsx (deprecated)	Replaced by Metadata API

Folder Structure Example


app/
 ├── layout.tsx
 ├── page.tsx
 ├── about/
 │    └── page.tsx
 ├── dashboard/
 │    ├── layout.tsx
 │    ├── page.tsx
 │    └── settings/
 │         └── page.tsx
 ├── api/
 │    └── users/
 │         └── route.ts

Route Grouping (How & Why)

Route Groups allow you to organize folders without affecting the URL.

Example Structure:


app/
  (public)/
    about/
      page.tsx
  (dashboard)/
    layout.tsx
    stats/
      page.tsx

URL Behaviour

Folder	URL
`(public)/about/page.tsx`	`/about`
`(dashboard)/stats/page.tsx`	`/stats`

Why Use Route Groups?

Manage multiple layouts in the same URL segment
Group related pages without changing routes
Apply different auth layouts to different sections

Example: Nesting Children with Groups


app/
  (auth)/
    login/page.tsx
    register/page.tsx
  (main)/
    dashboard/page.tsx
    dashboard/settings/page.tsx

Parallel Routing (Concept + Example)

Parallel routes allow rendering multiple independent UI segments at once, e.g.:

A sidebar and main content loading separately
Tabs that switch without unmounting
Shared layout with multiple dynamic screens

Folder Example


app/
  layout.tsx
  @sidebar/
    page.tsx
  @content/
    page.tsx

`layout.tsx`


export default function Layout({ sidebar, content }) {
  return (
    <div className="flex">
      <aside>{sidebar}</aside>
      <main className="flex-1">{content}</main>
    </div>
  )
}

Routes Rendered Simultaneously

/@sidebar/page.tsx
/@content/page.tsx

When to Use Parallel Routes

Dashboards
Multi-panel UIs
Multi-step flows
Chat apps sidebar + messages

References

Next.js App Routing Docs

Summary

The Next.js App Router is the modern way to build apps using React Server Components.
It supports nested layouts, loading states, error boundaries, and server actions.
The router is folder-based: page.tsx, layout.tsx, loading.tsx, and more.
Route Groups let you organize your app without affecting URLs.
Parallel Routes let you render multiple sections at the same time.
The App Router is more scalable, more powerful, and is the recommended approach for new apps.