تسلط به Next.js - بخش 2: App Router

آنچه یاد خواهید گرفت:

• ساخت داشبوردهای فول‌استک: به App Router در Next.js مسلط شوید و یک داشبورد مالی آماده‌ی محیط Production ایجاد خواهید کرد که از طرح بندی های تو‌در‌تو و Routing بهینه‌شده بهره می‌برد.
• تسلط به پایگاه داده و SQL: اتصال به پایگاه داده PostgreSQL، نگارش کوئری‌های SQL بهینه و پیاده‌سازی استریمینگ داده برای دستیابی به بارگذاری فوق‌سریع صفحات
• Server Actions و عملیات تغییر داده: مدیریت ارسال فرم‌ها و بروزرسانی داده‌ با استفاده از Server Actions، همراه با اعتبارسنجی سمت سرور و بازاعتبارسنجی خودکار کش 
• جستجو و صفحه‌بندی: پیاده‌سازی قابلیت‌های جستجوی پربازده و صفحه‌بندی همگام با URL که علاوه بر بهبود SEO، امکان اشتراک‌گذاری استیت میان کاربران را فراهم می‌کند.
• احراز هویت و امنیت: ایمن‌سازی داشبورد با NextAuth.js از طریق پیاده‌سازی Protected Routes و Middleware برای مدیریت سشن های کاربری و حفظ محرمانگی داده‌

پیش‌نیازهای دوره

• اتمام بخش اول دوره: تسلط مناسب به مفاهیم اساسی مطرح‌شده در دوره Mastering Next.js 1: React Foundations یا برخورداری از تجربه‌ای معادل در مباحث اولیه Next.js
• دانش متوسط React: آشنایی کامل با: React Hooks (مانند useState ،useEffect)، کامپوننت‌های تابعی، الگوی ذهنی Thinking in React
• مبانی JavaScript و TypeScript: آشنایی با قابلیت‌های ES6+ از جمله: Destructuring ،arrow functions، Async/Await و درک اولیه از سیستم نوع‌دهی TypeScript
• محیط توسعه: نصب Node.js نسخه 18.17.0 یا بالاتر، آشنایی مقدماتی با Terminal / Command Line
• حساب GitHub: دانش اولیه با Git شامل (Clone کردن مخازن، Commit کردن کد) به‌منظور دنبال‌کردن روند مدیریت نسخه‌های پروژه موردنیاز است.

توضیحات دوره

هدف دوره: فراتر از مبانی حرکت کنید. با ساخت یک داشبورد مالی آماده‌ی استقرار در محیط Production، به App Router ،Server Actions و یکپارچه‌سازی پایگاه داده مسلط شوید.

بررسی دوره

در بخش اول، به اصول React و مدل‌های ذهنی اصلی Next.js مسلط می شوید. اکنون زمان آن رسیده است که این مهارت‌ها را در پروژه‌های واقعی به کار بگیرید.

در دومین بخش از مجموعه Mastering Next.js، از دنیای کامپوننت‌های منفرد عبور کرده و وارد قلمرو توسعه فول‌استک می‌شویم. در این دوره، پروژه‌ای با عنوان داشبورد Acme را توسعه خواهیم داد؛ یک سامانه مالی پیچیده و غنی از قابلیت‌ها که تقریباً تمامی امکانات پیشرفته Next.js App Router را به‌کار می‌گیرد.

از طراحی Schemaهای پایگاه داده گرفته تا مدیریت احراز هویت پیشرفته و جستجوی بلادرنگ، این دوره برای تبدیل شما به یک توسعه‌دهنده حرفه‌ای Next.js طراحی شده است؛ فردی که قادر به طراحی، ایمن‌سازی و استقرار وب اپلیکیشن های مقیاس‌پذیر است.

آنچه در این دوره خواهید آموخت

• قدرت App Router: بررسی عمیق طرح بندی های تودرتو، مسیریابی پویا و الگوی جریان‌دهی مبتنی بر فایل
• پایگاه داده و واکشی داده: یک پایگاه داده PostgreSQL را راه‌اندازی کرده و چگونگی واکشی بهینه داده‌ با استفاده از Server Components و زبان SQL را خواهید آموخت.
• Server Actions (تغییرات): فراتر از APIها حرکت کنید. یاد بگیرید که چگونه ارسال فرم‌ها را مدیریت کنید، داده را با Zod اعتبارسنجی کنید، و حافظه پنهان Next.js را مجدداً اعتبارسنجی نمایید.
• جستجو و صفحه‌بندی: جستجو و صفحه‌بندی با کارایی بالا را با استفاده از استیت موجود در URL پیاده‌سازی کنید - که برای سئو و تجربه کاربری عالی است.
• احراز هویت و امنیت: داشبورد خود را با NextAuth.js ایمن کنید و میان‌افزار را برای محافظت از مسیرهای حساس پیاده‌سازی نمایید.
• دسترس‌پذیری (a11y): به هنر ساختن فرم‌های فراگیر و الگوهای رابط کاربری قابل دسترس مسلط شوید.
• بهینه‌سازی عملکرد: رندر اولیه جزئی، بهینه‌سازی تصاویر و بهترین شیوه های استفاده از فونت را یاد بگیرید تا به نمره کامل Lighthouse دست یابید.

محتوای دوره

• راه‌اندازی و معماری پروژه: آماده‌سازی پروژه اولیه Acme برای مقیاس‌پذیری
• استایل‌دهی و رابط کاربری: Tailwind CSS ،CSS Modules و ایجاد یک رابط کاربری یکپارچه برای داشبورد
• بهینه‌سازی: مدیریت دارایی‌ها مانند یک حرفه‌ای (فونت‌ها، تصاویر و فراداده)
• مسیریابی و طرح بندی ها: سازماندهی یک داشبورد پیچیده با مسیرهای تو در تو
• لایه داده: یکپارچه‌سازی PostgreSQL و نوشتن کامپوننت‌های سمت سرور کارآمد
• داشبوردهای تعاملی: ساختن اسکلت‌های پخش جریانی و مدیریت داده‌ ناهمگام 
• تغییرات داده: ایجاد، بروزرسانی و حذف فاکتورها با استفاده از Server Actions
• اعتبارسنجی و مدیریت فرم: استفاده از Zod برای اعتبارسنجی سمت سرور با ایمنی نوع 
• امنیت: پیاده‌سازی NextAuth.js برای احراز هویت قدرتمند
• استقرار نهایی: راه‌اندازی روی Vercel با یک محیط آماده تولید

این دوره برای چه کسانی است؟

• دانشجویان بخش 1: اگر «اصول React» را به پایان رسانده‌اید، این گام طبیعی بعدی شما است.
• توسعه‌دهندگان React: کسانی که مبانی را می‌دانند اما می‌خواهند یاد بگیرند چگونه یک اپلیکیشن «کامل» بسازند.
• توسعه‌دهندگان Backend: توسعه‌دهندگانی که به دنبال انتقال به کار فول استک با استفاده از یک پشته مدرن جاوااسکریپت هستند.

این دوره برای چه کسانی مناسب است؟

• فارغ‌التحصیلان بخش 1: دانشجویانی که «تسلط به Next.js 1» را تکمیل کرده‌اند و آماده‌اند تا مهارت‌های اساسی React خود را در یک پروژه پیچیده و واقعی اعمال کنند.
• توسعه‌دهندگان مشتاق فول استک: توسعه‌دهندگان React که می‌خواهند فراتر از فرانت‌اند رفته و مدیریت پایگاه‌های داده، احراز هویت و منطق سمت سرور را یاد بگیرند.
• مهندسان فرانت‌اند: متخصصانی که می‌خواهند با تسلط به App Router Next.js ،Server Actions و تکنیک‌های مدرن بهینه‌سازی وب، از دیگران جلوتر بمانند.
• دانشجویان توسعه وب: یادگیرندگانی که آموزش «پروژه‌محور» را ترجیح می‌دهند و می‌خواهند یک داشبورد آماده برای نمونه کار داشته باشند تا به کارفرمایان بالقوه نشان دهند.
• توسعه‌دهندگان Backend: برنامه‌نویسانی که با SQL یا Node.js آشنا هستند و می‌خواهند ببینند چگونه ابرچارچوب‌های مدرنی مانند Next.js شکاف بین سرور و رابط کاربری را پر می‌کنند.