الداشبورد

الهدف

بعد هالدرس تقدر تبني dashboard layout محمي بالـ session، تعرض بيانات المستخدم من Prisma، وتتعامل مع الـ empty state والـ loading بشكل احترافي.

ليش هذا الحين؟

الـ API جاهز من الدرس اللي فات — الحين المفروض نبني الواجهة اللي يعيش فيها المستخدم. الداشبورد هو أول شي يشوفه بعد تسجيل الدخول، يعني لو كان بطيء أو فاضي بدون توجيه، المستخدم يطلع ولا يرجع. هذا مو تصميم، هذا بقاء.

الفكرة

الـ dashboard في Next.js يتكون من ثلاثة أجزاء رئيسية: الـ layout، والـ page، والـ loading.

الـ layout هو الغلاف — sidebar ثابت، و main content يتغير. المفروض يتحقق من الـ session هني، مرة وحدة، بدل ما تتحقق في كل صفحة.

الـ Server Components هي الأساس — تجيب البيانات مباشرة من Prisma بدون fetch، بدون loading state، بدون useEffect. أسرع وأنظف.

الـ empty state مو تفصيلة — هو CTA. لما المستخدم يدخل أول مرة وماكو بيانات، المفروض تقوله بالضبط شنو يسوي. زر واضح، جملة قصيرة.

الـ loading.tsx في Next.js يشتغل تلقائيا وأنت ما تحس — Next.js يعرضه لحظة ما يبدأ الـ fetch ويستبدله لما تجهز البيانات. هذا Suspense بدون ما تكتبه بيدك.