EN: A clean, production-ready admin dashboard starter built with Next.js 14 App Router, TypeScript, and Tailwind CSS.
TH: Admin dashboard starter ที่พร้อมใช้งาน สร้างด้วย Next.js 14 App Router, TypeScript และ Tailwind CSS
- Next.js 14 App Router — file-based routing, server components by default
- TypeScript — strict mode เปิดใช้งาน
- Tailwind CSS — utility-first styling พร้อม dark mode
- Recharts — responsive charts (line, bar, pie — ต่อยอดได้ทันที)
- Sidebar navigation — แสดง active state, รองรับ collapsible
- Stats cards — พร้อม trend indicators
- Data table — sortable, มี status badges
- Clean layout — header, sidebar และ main content area
git clone https://github.com/Ninjuy/nextjs-dashboard-starter.git
cd nextjs-dashboard-starter
npm install
cp .env.example .env.local
npm run devเปิดเบราว์เซอร์ที่ http://localhost:3000
src/
├── app/
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Landing page
│ └── dashboard/
│ ├── layout.tsx # Dashboard shell (sidebar + header)
│ └── page.tsx # Dashboard home
├── components/
│ ├── layout/
│ │ ├── Sidebar.tsx
│ │ └── Header.tsx
│ ├── charts/
│ │ └── RevenueChart.tsx
│ └── ui/
│ ├── StatCard.tsx
│ └── OrdersTable.tsx
└── lib/
├── utils.ts # cn(), formatters
└── mock-data.ts # แทนที่ด้วย API call จริง
- เชื่อมข้อมูลจริง — แทนที่
lib/mock-data.tsด้วย API call หรือ database query - เพิ่ม auth — เชื่อมต่อ NextAuth.js โดยใช้
AUTH_SECRETใน.env - เพิ่มหน้า — เพิ่มไฟล์ใต้
src/app/dashboard/(Orders, Customers ฯลฯ) - เพิ่ม chart — Recharts รองรับ Bar, Pie, Area, Scatter และอื่นๆ
- Dark mode — toggle class
darkบน<html>และใช้dark:variants ใน Tailwind
| Package | Version | Purpose / หน้าที่ |
|---|---|---|
| next | 14 | Framework |
| react | 18 | UI |
| typescript | 5 | Type safety |
| tailwindcss | 3 | Styling |
| recharts | 2 | Charts / กราฟ |
| clsx + tailwind-merge | latest | Class utilities |
MIT