📌 Advanced Routing and Navigation in Next.js

[akash-coded]

📌 Advanced Routing and Navigation in Next.js

🚀 Day 1: Deep dive into dynamic routing, nested layouts, API routing, and middleware.

"In web development, good routing is like a well-organized city: streets (routes) lead efficiently to destinations (pages), neighborhoods (nested routes) provide structured areas, and highways (API routes) connect everything seamlessly."

---

🟢 Section 1: Dynamic and Nested Routing in Next.js

🚀 1️⃣ Understanding Dynamic Routes in Next.js

Next.js makes file-system-based routing powerful by allowing dynamic paths. Think of it as a shopping mall:

• The main entrance (/) leads to multiple stores (pages).
• Each store has different sections (sub-pages).
• Some stores have dynamic sections based on user preferences (/store/[category]).

---

📌 How Dynamic Routes Work Under the Hood?

Unlike traditional React apps where routing is handled by react-router-dom, Next.js leverages the filesystem for routing. When a request comes in:

1. Next.js maps the URL path to a corresponding file in /pages/.
2. If the path includes [param].js, Next.js extracts that value dynamically.
3. For deeply nested structures (/user/[id]/orders/[orderId]), Next.js recursively matches files.
4. Data fetching (getStaticPaths, getServerSideProps) ensures dynamic content is resolved properly.

---

🛠 Implementation: Basic Dynamic Route

📌 File structure:

/pages
 ├── users
 │    ├── [id].js
 ├── index.js

📌 Code: pages/users/[id].js

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

const router = useRouter();

const { id } = router.query; // Dynamically extracted from URL
return <h1>User Profile: {id}</h1>;

}

🔹 Behavior:

• Navigating to /users/101 → Renders User Profile: 101.
• Navigating to /users/102 → Renders User Profile: 102.

---

⚡ How [id].js, […slug].js, and [[…slug]].js Differ?

Pattern	Example URL	Behavior
[id].js	/users/123	Matches exactly /users/:id
[...slug].js	/blog/2024/post	Matches /blog/:slug* (captures multiple segments)
[[...slug]].js	/blog, /blog/2024/post	Optional dynamic segments

📌 Example: Catch-All Dynamic Route (pages/blog/[...slug].js)

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

const router = useRouter();

const { slug } = router.query;
return <h1>Blog Path: {slug?.join('/') || "Home"}</h1>;

}

🔹 /blog/2024/nextjs → Renders Blog Path: 2024/nextjs
🔹 /blog → Renders Blog Path: Home

---

📌 Data Fetching in Dynamic Routes: getStaticPaths vs getServerSideProps

🚀 Why is router.query.id sometimes undefined in SSR?

• The useRouter() hook runs only on the client-side.
• Solution: Use getServerSideProps() to fetch data before rendering.

✅ Fetching Data with getServerSideProps()

export async function getServerSideProps(context) {
  const { id } = context.params;
return {

props: { id }, // Passed as props to component

};

}

🔹 Ensures id is available before render, avoiding undefined errors.

✅ Pre-rendering Static Pages with getStaticPaths()

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }], 
    fallback: false,
  };
}

🔹 Next.js pre-builds pages at build time (better for performance).

---

📌 Mermaid Diagram: How Dynamic Routing Works

graph TD;
  Home["/"] -->|Click User| UserList["/users"]
  UserList -->|Click Profile| UserProfile["/users/[id]"]
  UserProfile -->|API Fetch| UserDetails["Fetched Data"]
  UserDetails -->|Render Page| NextJS

---

🚀 Best Practices & Anti-Patterns in Dynamic Routing

✅ Things to Do (Best Practices)

✅ Use getServerSideProps() for dynamic data that changes frequently.
✅ Use getStaticPaths() when the number of routes is known ahead of time for performance.
✅ Always handle edge cases (e.g., user not found, API failure).

❌ Things to Avoid (Anti-Patterns)

❌ Do NOT use useRouter().query.id in SSR, as it will be undefined.
❌ Avoid deeply nested routes unless absolutely necessary for maintainability.
❌ Do NOT overuse getServerSideProps() if static generation is possible (bad for performance).

---

🏗 Complete Node.js App: Dynamic User Profiles

📌 Project Structure:

next-dynamic-routing
 ├── pages
 │    ├── users
 │    │    ├── [id].js
 │    ├── api
 │    │    ├── users.js
 ├── package.json
 ├── next.config.js
 ├── server.js

📌 Code: pages/users/[id].js

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

return <h1>User Profile: {user.name} (ID: {user.id})</h1>;

}
export async function getServerSideProps(context) {

const { id } = context.params;

const res = await fetch(http://localhost:3000/api/users?id=${id});

const user = await res.json();
return { props: { user } };

}

📌 Code: pages/api/users.js (Mock API for Users)

export default function handler(req, res) {
  const users = [
    { id: "101", name: "John Doe" },
    { id: "102", name: "Jane Smith" },
  ];
  const user = users.find(u => u.id === req.query.id);
  res.status(200).json(user || { error: "User not found" });
}

📌 Code: server.js (Optional: Custom Express Server for Next.js)

const express = require('express');
const next = require('next');
const app = next({ dev: true });

const handler = app.getRequestHandler();
app.prepare().then(() => {

const server = express();
server.all('*', (req, res) => handler(req, res));
server.listen(3000, () => {

console.log('Server running on http://localhost:3000');

});

});

---

📌 Next Steps:
✅ Read Next.js Docs on Dynamic Routing.
✅ Implement your own nested dashboard with dynamic paths.

---

💡 Up Next: Section 2 - Nested Layouts and Shared UI 🔥

---

I'll now generate notes for Nested Layouts & Shared UI, followed by API Routes & Middleware. Let me know if you want to tweak anything. 🚀

I'll generate the GitHub Markdown notes step by step, starting with **Dynamic and Nested Routing**. Below is the first section, followed by more in subsequent responses.

---

📌 Advanced Routing and Navigation in Next.js

🚀 Day 1: Deep dive into dynamic routing, nested layouts, API routing, and middleware.

"In web development, good routing is like a well-organized city: streets (routes) lead efficiently to destinations (pages), neighborhoods (nested routes) provide structured areas, and highways (API routes) connect everything seamlessly."

---

🟢 Section 1: Dynamic and Nested Routing in Next.js

🚀 1️⃣ Understanding Dynamic Routes in Next.js

Next.js makes file-system-based routing powerful by allowing dynamic paths. Think of it as a shopping mall:

• The main entrance (/) leads to multiple stores (pages).
• Each store has different sections (sub-pages).
• Some stores have dynamic sections based on user preferences (/store/[category]).

---

📌 How Dynamic Routes Work Under the Hood?

Unlike traditional React apps where routing is handled by react-router-dom, Next.js leverages the filesystem for routing. When a request comes in:

1. Next.js maps the URL path to a corresponding file in /pages/.
2. If the path includes [param].js, Next.js extracts that value dynamically.
3. For deeply nested structures (/user/[id]/orders/[orderId]), Next.js recursively matches files.
4. Data fetching (getStaticPaths, getServerSideProps) ensures dynamic content is resolved properly.

---

🛠 Implementation: Basic Dynamic Route

📌 File structure:

/pages
 ├── users
 │    ├── [id].js
 ├── index.js

📌 Code: pages/users/[id].js

import { useRouter } from 'next/router';

export default function UserProfile() {
  const router = useRouter();
  const { id } = router.query; // Dynamically extracted from URL

  return <h1>User Profile: {id}</h1>;
}

🔹 Behavior:

• Navigating to /users/101 → Renders User Profile: 101.
• Navigating to /users/102 → Renders User Profile: 102.

---

⚡ How [id].js, […slug].js, and [[…slug]].js Differ?

Pattern	Example URL	Behavior
[id].js	/users/123	Matches exactly /users/:id
[...slug].js	/blog/2024/post	Matches /blog/:slug* (captures multiple segments)
[[...slug]].js	/blog, /blog/2024/post	Optional dynamic segments

📌 Example: Catch-All Dynamic Route (pages/blog/[...slug].js)

import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query; 

  return <h1>Blog Path: {slug?.join('/') || "Home"}</h1>;
}

🔹 /blog/2024/nextjs → Renders Blog Path: 2024/nextjs
🔹 /blog → Renders Blog Path: Home

---

📌 Data Fetching in Dynamic Routes: getStaticPaths vs getServerSideProps

🚀 Why is router.query.id sometimes undefined in SSR?

• The useRouter() hook runs only on the client-side.
• Solution: Use getServerSideProps() to fetch data before rendering.

✅ Fetching Data with getServerSideProps()

export async function getServerSideProps(context) {
  const { id } = context.params;

  return {
    props: { id }, // Passed as props to component
  };
}

🔹 Ensures id is available before render, avoiding undefined errors.

✅ Pre-rendering Static Pages with getStaticPaths()

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }], 
    fallback: false,
  };
}

🔹 Next.js pre-builds pages at build time (better for performance).

---

📌 Mermaid Diagram: How Dynamic Routing Works

graph TD;
  Home["/"] -->|Click User| UserList["/users"]
  UserList -->|Click Profile| UserProfile["/users/[id]"]
  UserProfile -->|API Fetch| UserDetails["Fetched Data"]
  UserDetails -->|Render Page| NextJS

Loading

---

🚀 Best Practices & Anti-Patterns in Dynamic Routing

✅ Things to Do (Best Practices)

✅ Use getServerSideProps() for dynamic data that changes frequently.
✅ Use getStaticPaths() when the number of routes is known ahead of time for performance.
✅ Always handle edge cases (e.g., user not found, API failure).

❌ Things to Avoid (Anti-Patterns)

❌ Do NOT use useRouter().query.id in SSR, as it will be undefined.
❌ Avoid deeply nested routes unless absolutely necessary for maintainability.
❌ Do NOT overuse getServerSideProps() if static generation is possible (bad for performance).

---

🏗 Complete Node.js App: Dynamic User Profiles

📌 Project Structure:

next-dynamic-routing
 ├── pages
 │    ├── users
 │    │    ├── [id].js
 │    ├── api
 │    │    ├── users.js
 ├── package.json
 ├── next.config.js
 ├── server.js

📌 Code: pages/users/[id].js

import { useRouter } from 'next/router';

export default function UserProfile({ user }) {
  return <h1>User Profile: {user.name} (ID: {user.id})</h1>;
}

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`http://localhost:3000/api/users?id=${id}`);
  const user = await res.json();

  return { props: { user } };
}

📌 Code: pages/api/users.js (Mock API for Users)

export default function handler(req, res) {
  const users = [
    { id: "101", name: "John Doe" },
    { id: "102", name: "Jane Smith" },
  ];
  const user = users.find(u => u.id === req.query.id);
  res.status(200).json(user || { error: "User not found" });
}

📌 Code: server.js (Optional: Custom Express Server for Next.js)

const express = require('express');
const next = require('next');

const app = next({ dev: true });
const handler = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.all('*', (req, res) => handler(req, res));

  server.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
  });
});

---

📌 Next Steps:
✅ Read [Next.js Docs on Dynamic Routing](https://nextjs.org/docs/routing/dynamic-routes).
✅ Implement your own nested dashboard with dynamic paths.

---