💡 این آموزش گام به گام در ویدیوی بالا توضیح داده شده است - اگر می‌خواهید جزئیات کامل را با تصاویر ببینید، تماشا کنید.
مقدمه
داشبورد مدیریتی مدرن ساخته شده با Next.js و Tailwind CSS، رابط کاربری واکنش‌گرا و تجربه کاربری روان ارائه می‌دهد.
نصب پروژه
npx create-next-app@latest admin-dashboardدر حین نصب
- ✅ Would you like to use TypeScript? Yes.
- ✅ Which linter would you like to use? ESLint.
- ❌ Would you like to use Tailwind CSS? No.
- ✅ Would you like your code inside a `src/` directory? Yes.
- ✅ Would you like to use App Router? Yes .
- ❌ Would you like to use Turbopack? No.
- ❌ Would you like to customize the import alias (`@/*` by default)? No.
سپس این دستورات را اجرا کنید تا Tailwind CSS و lucide-react نصب شوند.
cd admin-dashboardnpm install tailwindcss@3.4.3 postcss@8.4.38 autoprefixer@10.4.19npm install lucide-reactnpx tailwindcss init -pاین را به فایل tailwind.config.js اضافه کنید
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
]این را به بالای فایل globals.css در پوشه /app اضافه کنید
@tailwind base;
@tailwind components;
@tailwind utilities;این کد را در فایل /app/layout.tsx بنویسید
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" dir="ltr">
<body className="h-screen">
{children}
</body>
</html>
);
}
کد زیر را به فایل /app/page.tsx اضافه کنید.
import Link from "next/link";
export default function Home() {
return (
<div>
<Link href="/dashboard"
className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">Go to dashboard</Link>
</div>
);
}
در پوشه /app، پوشه‌ای به نام dashboard ایجاد کنید. درون آن، دو فایل layout.tsx و page.tsx را اضافه کنید.
کد زیر را به فایل /app/dashboard/layout.tsx اضافه کنید.
"use client";
import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { LayoutDashboard, Users, UserCircle, ChevronDown
,User, Settings, LogOut
} from "lucide-react";
export default function DashboardLayout({ children } : { children: React.ReactNode }){
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
return (
<div className="flex h-screen bg-gray-300">
<aside className="fixed inset-y-0 left-0 w-64 bg-gray-900 text-white
flex flex-col transform transition-transform duration-300
z-20 md:translate-x-0 md:static">
<div className="p-[20px] text-2xl font-bold border-b border-gray-700
flex justify-between items-center">
Admin Dashboard
</div>
<nav className="flex-1 p-4 space-y-2">
<Link
href="/dashboard"
className="flex items-center gap-2 px-4 py-2 rounded">
<LayoutDashboard size={18} />
Dashboard
</Link>
<Link
href="/dashboard/staff"
className="flex items-center gap-2 px-4 py-2 rounded">
<Users size={18} />
Staff
</Link>
<Link
href="/dashboard/clients"
className="flex items-center gap-2 px-4 py-2 rounded">
<UserCircle size={18} />
Clients
</Link>
</nav>
</aside>
<div className="flex-1 flex flex-col">
<nav className="bg-white shadow-md px-4 py-[12px] flex items-center">
<div className="flex-1" />
<div className="relative flex items-center gap-2">
<button
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
className="flex items-center gap-2 px-2 py-1 rounded-full
focus:outline-none">
<div
className="w-10 h-10 rounded-full overflow-hidden relative">
<Image
src="/images/profile-image.jpg"
alt="avatar"
fill
className="object-cover" />
</div>
<span className="font-medium text-blue-700 hidden sm:inline">Todik</span>
<ChevronDown size={18} />
</button>
{isDropdownOpen && (
<div className="absolute right-0 mt-48 w-40 bg-white border
border-gray-200 rounded-md shadow-lg py-1 z-30">
<Link
href="/dashboard/profile"
onClick={() => setIsDropdownOpen(false)}
className="flex items-center gap-2 w-full text-left
px-4 py-2 hover:bg-gray-100"
>
<User size={18} />
Profile
</Link>
<Link
href="/dashboard/settings"
onClick={() => setIsDropdownOpen(false)}
className="flex items-center gap-2 w-full text-left
px-4 py-2 hover:bg-gray-100"
>
<Settings size={18} />
Settings
</Link>
<button
onClick={() => setIsDropdownOpen(false)}
className="flex items-center gap-2 w-full text-left
px-4 py-2 hover:bg-gray-100"
>
<LogOut size={18} />
Logout
</button>
</div>
)}
</div>
</nav>
<main className="flex-1 overflow-auto">{children}</main>
</div>
</div>
)
}
کد زیر را به فایل /app/dashboard/page.tsx اضافه کنید.
export default function DashboardHome() {
return(
<h1 className="text-3xl text-red-500">Dashboard home page</h1>
)
}
در داخل /app/dashboard، چهار پوشه ایجاد کنید: staff، clients، profile و settings. سپس، یک فایل page.tsx را در هر پوشه اضافه کنید.
کد زیر را به فایل /app/dashboard/staff/page.tsx اضافه کنید.
export default function Staff(){
return (
<h1 className="text-3xl text-red-500">Staff page</h1>
)
}
کد زیر را به فایل /app/dashboard/clients/page.tsx اضافه کنید.
export default function Clients(){
return(
<h1 className="text-3xl text-red-500">Clients page</h1>
)
}
کد زیر را به فایل /app/dashboard/profile/page.tsx اضافه کنید.
export default function Profile(){
return(
<h1 className="text-3xl text-red-500">Profile page</h1>
)
}
کد زیر را به فایل /app/dashboard/settings/page.tsx اضافه کنید.
export default function Settings(){
return (
<h1 className="text-3xl text-red-500">Settings page</h1>
)
}
حالا این دستور را اجرا کنید و از داشبورد مدیریت لذت ببرید
npm run dev
لینک گیت‌هاب
git clone https://github.com/todik50/admin-dashboard.git