🚀 Next.js App Router - The Complete Guide with a Hands-on Application

[akash-coded]

🚀 Next.js App Router - The Complete Guide with a Hands-on Application

"The App Router in Next.js is the future of modern web applications—server-first, highly scalable, and incredibly efficient. If you master this, you master modern React."

---

📌 Overview: What We’re Building

We'll create a TCS Project Management Dashboard using the Next.js App Router. This will cover:
✅ Static and Dynamic Routing
✅ Layouts and Nested Routes
✅ Server Components vs Client Components
✅ Data Fetching (Streaming, SSG, SSR, and ISR)
✅ Middleware and Authentication
✅ Server Actions for API Calls (No API Routes Needed!)

📌 Project Structure

next-tcs-app-router
 ├── app
 │    ├── layout.tsx          # Global Layout
 │    ├── page.tsx            # Home Page
 │    ├── about
 │    │    ├── page.tsx       # About Page
 │    ├── projects
 │    │    ├── page.tsx       # Project List
 │    │    ├── [id]
 │    │    │    ├── page.tsx  # Project Details (Dynamic Route)
 │    │    ├── new
 │    │    │    ├── page.tsx  # Add New Project
 │    ├── api
 │    │    ├── projects       # Server Action (No API Route!)
 │    │    │    ├── route.ts
 │    ├── middleware.ts       # Middleware for Authentication
 ├── components
 │    ├── Navbar.tsx          # Common Navigation
 ├── styles
 │    ├── globals.css         # Global Styles
 ├── next.config.js
 ├── package.json
 ├── server.js (optional)     # Custom Express Server

---

📌 Setting Up the Project

npx create-next-app@latest next-tcs-app-router --experimental-app
cd next-tcs-app-router
npm install

---

📌 Step 1: Creating Static Routes

🏠 1️⃣ Home Page (/app/page.tsx)

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to TCS Project Management Dashboard</h1>
      <nav>
        <Link href="/about">About</Link> | 
        <Link href="/projects">Project List</Link>
      </nav>
    </div>
  );
}

🔹 Concepts Covered:
✅ Static routing
✅ SEO-friendly navigation
✅ Link for client-side routing

---

ℹ️ 2️⃣ About Page (/app/about/page.tsx)

export default function About() {
  return <h1>About TCS Project Management</h1>;
}

🔹 Concepts Covered:
✅ Static page
✅ Server-first rendering

---

📌 Step 2: Dynamic Routing - Project Pages

🛠 3️⃣ Project List Page (/app/projects/page.tsx)

import Link from 'next/link';

const projects = [
  { id: '101', name: 'AI Chatbot' },
  { id: '102', name: 'Banking App' },
];

export default function Projects() {
  return (
    <div>
      <h1>Project List</h1>
      <ul>
        {projects.map((proj) => (
          <li key={proj.id}>
            <Link href={`/projects/${proj.id}`}>{proj.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

🔹 Concepts Covered:
✅ Nested routing (/projects/)
✅ Dynamic Links with [id]

---

🆔 4️⃣ Project Details Page (/app/projects/[id]/page.tsx)

async function getProjectData(id) {
  return { id, name: id === '101' ? 'AI Chatbot' : 'Banking App' };
}

export default async function Project({ params }) {
  const project = await getProjectData(params.id);

  return <h1>Project: {project.name} (ID: {project.id})</h1>;
}

🔹 Concepts Covered:
✅ Dynamic routing with [id]
✅ Fetching data inside a server component (no useEffect needed!)

---

📌 Step 3: Layouts and Nested Routing

🗂 5️⃣ Creating a Shared Layout (/app/layout.tsx)

import Navbar from '../components/Navbar';

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

🔹 Concepts Covered:
✅ Shared layout for all pages
✅ Global state preservation

---

📌 Step 4: API Calls with Server Actions

🔗 6️⃣ Server Action to Fetch Projects (/app/api/projects/route.ts)

export async function GET() {
  return new Response(JSON.stringify([
    { id: '101', name: 'AI Chatbot' },
    { id: '102', name: 'Banking App' },
  ]));
}

🔹 Concepts Covered:
✅ API route replacement using Server Actions
✅ No need for pages/api/ anymore

---

📌 Step 5: Custom Middleware

🛡 7️⃣ Protecting Routes (/middleware.ts)

import { NextResponse } from 'next/server';

export function middleware(req) {
  const isLoggedIn = req.cookies.get('auth');
  if (!isLoggedIn) {
    return NextResponse.redirect(new URL('/login', req.url));
  }
  return NextResponse.next();
}

🔹 Concepts Covered:
✅ Protecting private routes
✅ Redirecting unauthorized users

---

📌 Step 6: Custom 404 Page

🚨 8️⃣ Custom 404 Page (/app/not-found.tsx)

export default function NotFound() {
  return <h1>Oops! Page not found</h1>;
}

🔹 Concepts Covered:
✅ Custom error handling

---

📌 Best Practices & Anti-Patterns

✅ Things to Do

✅ Use Server Components for data fetching
✅ Use Middleware for authentication and security
✅ Use Shared Layouts for consistency
✅ Optimize API calls using Server Actions

---

❌ Things to Avoid

❌ Do NOT use Client Components unnecessarily
❌ Do NOT fetch data in Client Components if Server Components can handle it
❌ Do NOT use useEffect for fetching server-side data
❌ Do NOT mix Pages Router and App Router

---

📌 Full Code Repository

🔗 GitHub Repo: [Next.js TCS App Router](#) (Coming Soon!)

---

📌 Summary

✅ Static and dynamic routing
✅ Layouts and API replacements
✅ Streaming and Middleware
✅ Authentication and global state

📌 Next Steps:
🔹 Convert this into a full-fledged admin dashboard
🔹 Add protected routes and user authentication

---

🚀 What’s Next?

🔥 Next Lesson: Client Components & State Management in App Router