📌 Next.js Routing: Pages Router vs. App Router

[akash-coded]

Here are the detailed notes on Routing in Next.js, covering both Pages Router vs. App Router, along with static and dynamic routing, when to use what, best practices, pitfalls, and a complete hands-on example.

---

📌 Next.js Routing: Pages Router vs. App Router

"Routing in Next.js is like navigating a well-planned city. Some roads (static routes) never change, while others (dynamic routes) adapt based on conditions. Next.js offers two ways to handle routing: the old-school 'Pages Router' and the modern 'App Router' with React Server Components."

---

🏗 1️⃣ Pages Router vs. App Router: Understanding the Evolution

🔷 What is the Pages Router?

The Pages Router is the traditional way of routing in Next.js (before Next.js 13). It uses a file-based routing system inside the /pages directory.

✅ Key Features:

• Every .js or .tsx file inside /pages automatically becomes a route.
• Supports static (SSG) and server-side (SSR) data fetching.
• Uses getStaticProps, getServerSideProps, getStaticPaths.
• Good for projects that need stability and predictability.

📌 Example:

/pages
 ├── index.js       # → `/`
 ├── about.js       # → `/about`
 ├── products
 │    ├── [id].js   # → `/products/:id`

🔹 How to Fetch Data in Pages Router?

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

---

🔷 What is the App Router? (Next.js 13+)

The App Router (/app directory) introduces a React Server Component-first approach, making data fetching more efficient and scalable.

✅ Key Features:

• Uses server components by default (better performance).
• Supports layouts, loading states, and streaming data.
• No need for getServerSideProps, getStaticProps.
• Works well with React 18's Suspense and Streaming.

📌 Example:

/app
 ├── layout.tsx      # Layout file for all pages
 ├── page.tsx        # → `/`
 ├── about
 │    ├── page.tsx   # → `/about`
 ├── products
 │    ├── [id]       # Dynamic route `/products/:id`
 │    │    ├── page.tsx  

🔹 Fetching Data in App Router (Server Component)

async function Product({ params }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`).then(res => res.json());
return <h1>{product.name}</h1>;

}
export default Product;

---

🛠 2️⃣ Static vs. Dynamic Routing in Next.js

Both Pages Router and App Router support static and dynamic routing, but the implementation differs.

🔹 Static Routing: When the Route Structure is Fixed

✅ Use when pages are known beforehand.
✅ Faster because it can be pre-rendered at build time.
✅ Good for homepages, about pages, documentation, etc.

📌 Pages Router (Static Route Example)

/pages
 ├── about.js  # → `/about`

export default function About() {
  return <h1>About Us</h1>;
}

📌 App Router (Static Route Example)

/app
 ├── about
 │    ├── page.tsx  # → `/about`

export default function About() {
  return <h1>About Us</h1>;
}

---

🔹 Dynamic Routing: When the Route is Unknown in Advance

✅ Use when page paths depend on dynamic data (e.g., users, products).
✅ Can be server-rendered (SSR) or statically generated (SSG).
✅ Good for user profiles, blog posts, e-commerce product pages.

📌 Pages Router (Dynamic Route Example)

/pages
 ├── products
 │    ├── [id].js  # → `/products/:id`

import { useRouter } from 'next/router';
export default function Product() {

const router = useRouter();

const { id } = router.query;
return <h1>Product ID: {id}</h1>;

}

📌 App Router (Dynamic Route Example)

/app
 ├── products
 │    ├── [id]
 │    │    ├── page.tsx  # → `/products/:id`

async function Product({ params }) {
  return <h1>Product ID: {params.id}</h1>;
}
export default Product;

---

🏗 3️⃣ When to Use What?

Feature	Pages Router (/pages)	App Router (/app)
File Structure	Based on /pages folder	Based on /app folder
Data Fetching	Uses getStaticProps, getServerSideProps	Uses fetch() directly in Server Components
Performance	Good but can be optimized	Faster with React Server Components
Streaming	Not supported	Supports Streaming + Suspense
SEO	Built-in with getStaticProps	Uses head metadata
Use Case	Legacy projects, stable setups	Modern projects, performance-first

✅ Use Pages Router if:

• You already have a Pages Router project and don’t need major changes.
• You prefer familiar Next.js routing with SSR/SSG.
• You don’t need React Server Components or Suspense.

✅ Use App Router if:

• You’re starting a new project in Next.js 13+.
• You want better performance using React Server Components.
• You need streaming, layouts, and async data fetching.

---

📌 4️⃣ Common Pitfalls & Best Practices

❌ Anti-Patterns in Next.js Routing

🚨 1. Avoid using both /pages and /app together in one project.
❌ Mixing the two can cause unexpected behavior in Next.js 13+.

🚨 2. Don't overuse getServerSideProps() if static generation is possible.
❌ SSR slows down performance if you fetch data on every request.

🚨 3. Avoid using useRouter().query for SSR.
❌ The useRouter() hook doesn't work on the server, leading to undefined errors.

---

✅ Best Practices in Next.js Routing

✅ 1. Use Static Generation (getStaticProps()) whenever possible.
✅ 2. Use App Router for modern projects needing streaming, layouts.
✅ 3. Organize route structures logically (avoid deep nesting).

---

🛠 5️⃣ Hands-on Project: Next.js Routing Example

📌 Project Structure

next-routing-demo
 ├── app
 │    ├── layout.tsx  # Global Layout
 │    ├── page.tsx  # Home Route
 │    ├── products
 │    │    ├── [id]
 │    │    │    ├── page.tsx  # Dynamic Product Page

📌 Code: app/products/[id]/page.tsx

async function Product({ params }) {
  return <h1>Product ID: {params.id}</h1>;
}
export default Product;

📌 Code: app/layout.tsx (Global Layout)

export default function Layout({ children }) {
  return (
    <div>
      <nav>Navbar</nav>
      <main>{children}</main>
    </div>
  );
}

---

📌 Next Steps: ✅ Read Next.js Docs on Routing.
✅ Build a dynamic blog page using the App Router.

---

Let me know if you need any refinements! 🚀 Next, we can dive deeper into layouts or API routes.

Here are the **detailed GitHub Markdown notes** on **Routing in Next.js**, covering both **Pages Router vs. App Router**, along with **static and dynamic routing**, when to use what, best practices, pitfalls, and a complete hands-on example.

---

📌 Next.js Routing: Pages Router vs. App Router

"Routing in Next.js is like navigating a well-planned city. Some roads (static routes) never change, while others (dynamic routes) adapt based on conditions. Next.js offers two ways to handle routing: the old-school 'Pages Router' and the modern 'App Router' with React Server Components."

---

🏗 1️⃣ Pages Router vs. App Router: Understanding the Evolution

🔷 What is the Pages Router?

The Pages Router is the traditional way of routing in Next.js (before Next.js 13). It uses a file-based routing system inside the /pages directory.

✅ Key Features:

• Every .js or .tsx file inside /pages automatically becomes a route.
• Supports static (SSG) and server-side (SSR) data fetching.
• Uses getStaticProps, getServerSideProps, getStaticPaths.
• Good for projects that need stability and predictability.

📌 Example:

/pages
 ├── index.js       # → `/`
 ├── about.js       # → `/about`
 ├── products
 │    ├── [id].js   # → `/products/:id`

🔹 How to Fetch Data in Pages Router?

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

---

🔷 What is the App Router? (Next.js 13+)

The App Router (/app directory) introduces a React Server Component-first approach, making data fetching more efficient and scalable.

✅ Key Features:

• Uses server components by default (better performance).
• Supports layouts, loading states, and streaming data.
• No need for getServerSideProps, getStaticProps.
• Works well with React 18's Suspense and Streaming.

📌 Example:

/app
 ├── layout.tsx      # Layout file for all pages
 ├── page.tsx        # → `/`
 ├── about
 │    ├── page.tsx   # → `/about`
 ├── products
 │    ├── [id]       # Dynamic route `/products/:id`
 │    │    ├── page.tsx  

🔹 Fetching Data in App Router (Server Component)

async function Product({ params }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`).then(res => res.json());

  return <h1>{product.name}</h1>;
}

export default Product;

---

🛠 2️⃣ Static vs. Dynamic Routing in Next.js

Both Pages Router and App Router support static and dynamic routing, but the implementation differs.

🔹 Static Routing: When the Route Structure is Fixed

✅ Use when pages are known beforehand.
✅ Faster because it can be pre-rendered at build time.
✅ Good for homepages, about pages, documentation, etc.

📌 Pages Router (Static Route Example)

/pages
 ├── about.js  # → `/about`

export default function About() {
  return <h1>About Us</h1>;
}

📌 App Router (Static Route Example)

/app
 ├── about
 │    ├── page.tsx  # → `/about`

export default function About() {
  return <h1>About Us</h1>;
}

---

🔹 Dynamic Routing: When the Route is Unknown in Advance

✅ Use when page paths depend on dynamic data (e.g., users, products).
✅ Can be server-rendered (SSR) or statically generated (SSG).
✅ Good for user profiles, blog posts, e-commerce product pages.

📌 Pages Router (Dynamic Route Example)

/pages
 ├── products
 │    ├── [id].js  # → `/products/:id`

import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Product ID: {id}</h1>;
}

📌 App Router (Dynamic Route Example)

/app
 ├── products
 │    ├── [id]
 │    │    ├── page.tsx  # → `/products/:id`

async function Product({ params }) {
  return <h1>Product ID: {params.id}</h1>;
}

export default Product;

---

🏗 3️⃣ When to Use What?

Feature	Pages Router (/pages)	App Router (/app)
File Structure	Based on /pages folder	Based on /app folder
Data Fetching	Uses getStaticProps, getServerSideProps	Uses fetch() directly in Server Components
Performance	Good but can be optimized	Faster with React Server Components
Streaming	Not supported	Supports Streaming + Suspense
SEO	Built-in with getStaticProps	Uses head metadata
Use Case	Legacy projects, stable setups	Modern projects, performance-first

✅ Use Pages Router if:

• You already have a Pages Router project and don’t need major changes.
• You prefer familiar Next.js routing with SSR/SSG.
• You don’t need React Server Components or Suspense.

✅ Use App Router if:

• You’re starting a new project in Next.js 13+.
• You want better performance using React Server Components.
• You need streaming, layouts, and async data fetching.

---

📌 4️⃣ Common Pitfalls & Best Practices

❌ Anti-Patterns in Next.js Routing

🚨 1. Avoid using both /pages and /app together in one project.
❌ Mixing the two can cause unexpected behavior in Next.js 13+.

🚨 2. Don't overuse getServerSideProps() if static generation is possible.
❌ SSR slows down performance if you fetch data on every request.

🚨 3. Avoid using useRouter().query for SSR.
❌ The useRouter() hook doesn't work on the server, leading to undefined errors.

---

✅ Best Practices in Next.js Routing

✅ 1. Use Static Generation (getStaticProps()) whenever possible.
✅ 2. Use App Router for modern projects needing streaming, layouts.
✅ 3. Organize route structures logically (avoid deep nesting).

---

🛠 5️⃣ Hands-on Project: Next.js Routing Example

📌 Project Structure

next-routing-demo
 ├── app
 │    ├── layout.tsx  # Global Layout
 │    ├── page.tsx  # Home Route
 │    ├── products
 │    │    ├── [id]
 │    │    │    ├── page.tsx  # Dynamic Product Page

📌 Code: app/products/[id]/page.tsx

async function Product({ params }) {
  return <h1>Product ID: {params.id}</h1>;
}

export default Product;

📌 Code: app/layout.tsx (Global Layout)

export default function Layout({ children }) {
  return (
    <div>
      <nav>Navbar</nav>
      <main>{children}</main>
    </div>
  );
}

---

📌 Next Steps:
✅ Read [Next.js Docs on Routing](https://nextjs.org/docs/app/building-your-application/routing).
✅ Build a dynamic blog page using the App Router.