About
About This Project
This is a demonstration of Next.js 13+ App Router with routing and layout system.
Server Components vs Client Components
Server Components: Default in Next.js App Router. Rendered on server, no JavaScript sent to client, can access backend resources directly.
Client Components: Use "use client" directive. Enable interactivity with useState, useEffect, event handlers. Rendered on client side.
Routing Structure
app/
├── page.js (Landing Page - /)
└── layout.js (Root Layout)
├── about/
└── page.js (About - /about)
├── components (UI Components - /)
└─── UI/
└── Modal.js
└── Card.js
└── Input.js
└── Button.js
└── Navbar.js
└── Sidebar.js
├── dashboard/
└── page.js (Dashboard Page - /dashboard)
└─── users
└── page.js (Users Page - /users)
├── profile/
└── page.js (Profile Page - /profile)
├── login/
└── page.js (Login Page - /login)