ReactJS

How to Use the App Router Effectively in Next.js

Need technical help?

Our experts will get back to you within 24 hours.

Introduction

The App Router in Next.js (introduced in Next.js 13 and refined in Next.js 14 & 15) provides a new way to structure and manage routing. Unlike the Pages Router, the App Router leverages React Server Components (RSCs), server actions, and layouts for a more scalable and optimized experience.

1. Understanding the App Router Structure

In the App Router, you define routes inside the /app directory using folders instead of files. Here's an example:

project-root/

│

├── public/

│ └── favicon.ico

│

├── src/

│ └── app/

│ ├── about/

│ │ ├── error.tsx

│ │ ├── loading.tsx

│ │ └── page.tsx

│ │

│ ├── dashboard/

│ │ ├── layout.tsx

│ │ └── page.tsx

│ │

│ ├── globals.css

│ ├── layout.tsx

│ ├── page.module.css

│ └── page.tsx

2. Leveraging React Server Components (RSCs)

By default, all components in the App Router are Server Components, which means they:

Reduce JavaScript bundle size

Fetch data on the server

Improve SEO and performance

Example of fetching data inside a Server Component:

async function getProducts() {const res = await fetch('https://fakestoreapi.com/products');return res.json();}export default async function ProductsPage() {const products = await getProducts();return (<div><h1>Products</h1><ul>{products.map((product) => (<li key={product.id}>{product.title}</li>))}</ul></div>);}

3. Using layout.tsx for Persistent UI

The layout.tsx file helps maintain UI across multiple pages without reloading components (e.g., navigation, sidebar).

export default function RootLayout({children}: {children: React.ReactNode}) {return (<html lang="en"><body><nav>Navbar</nav>{children}</body></html>);}

4. Implementing Loading and Error Handling

You can define loading.tsx and error.tsx inside any folder to handle loading states and errors gracefully.

Example: loading.tsx

export default function Loading() {return <p>Loading...</p>;}Example: error.tsx"use client";export default function ErrorPage({error}: {error: Error}) {return <p>Something went wrong: {error.message}</p>;}

5. Using Server Actions for Form Handling

Next.js 15 introduces Server Actions, allowing you to mutate data without API routes.

"use server";export async function submitForm(formData: FormData) {const name = formData.get("name");console.log(`Form submitted by: ${name}`);}export default function ContactPage() {return (<form action={submitForm}><input type="text" name="name" required /><button type="submit">Submit</button></form>);}