دوره آموزشی تسلط بر Next.js: توسعه وب عملی پیشرفته، مبانی React، Next.js پیشرفته و استقرار
10 ساعت 13 دقیقهمتوسط2026-02-25
مدرسین

Packt Publishing
جزئیات دوره
در دنیای توسعه وب مدرن، کاربران انتظار دارند برنامههای تحت وب علاوه بر ظاهر جذاب، سرعت بالا، تجربه کاربری روان و قابلیت دسترسی مناسب در موتورهای جستجو داشته باشند. Next.js (نکستجیاس) بهعنوان یکی از محبوبترین فریمورکهای مبتنی بر React.js (ریاکت)، فرآیند ساخت برنامههای وب مدرن را سادهتر کرده و امکانات قدرتمندی برای بهینهسازی عملکرد، مقیاسپذیری و SEO (بهینهسازی موتور جستجو) ارائه میدهد.
این دوره یک مسیر جامع برای یادگیری توسعه وب با Next.js ارائه میکند که از مبانی توسعه وب و مفاهیم پایه React آغاز شده و تا تکنیکهای پیشرفته Next.js و استقرار برنامههای واقعی ادامه پیدا میکند. در طول دوره، با معماری Next.js، روشهای مختلف رندرینگ، مدیریت مسیرها، بهینهسازی عملکرد و ساخت پروژههای کاربردی آشنا خواهید شد.
در بخش ابتدایی دوره، مفاهیم پایه توسعه وب و اصول ضروری React بررسی میشوند. شما یاد میگیرید چگونه با Components (کامپوننتها)، ساختار برنامههای React و روشهای ایجاد رابطهای کاربری مدرن کار کنید و پایه لازم برای توسعه پروژههای Next.js را به دست آورید.
سپس وارد مفاهیم اصلی Next.js میشوید و با روشهای مختلف تولید و نمایش محتوا مانند Server-Side Rendering (SSR)، Client-Side Rendering (CSR)، Static Site Generation (SSG) و Incremental Static Regeneration (ISR) آشنا خواهید شد. این تکنیکها به شما کمک میکنند برنامههایی بسازید که هم عملکرد بالایی داشته باشند و هم برای موتورهای جستجو بهینه باشند.
یکی از بخشهای مهم دوره، پیادهسازی Dynamic Routing (مسیریابی پویا) و مدیریت ساختار صفحات در برنامههای Next.js است. در این بخش یاد میگیرید چگونه برنامههایی ایجاد کنید که بتوانند محتواهای متنوع و پویا را به شکل حرفهای مدیریت کنند.
در ادامه، بهترین روشهای توسعه با Next.js بررسی میشوند؛ از جمله طراحی معماری مناسب برنامه، بهینهسازی عملکرد (Performance Optimization)، افزایش مقیاسپذیری (Scalability) و آمادهسازی پروژه برای محیطهای واقعی Production.
بخش عملی دوره شامل ساخت یک پروژه نهایی کامل است که در آن تمامی مفاهیم آموزشدادهشده به کار گرفته میشوند. شما یک برنامه کاربردی مانند Blog CMS (سیستم مدیریت محتوای وبلاگ) را از مرحله طراحی ساختار برنامه تا استقرار نهایی توسعه میدهید و تجربه عملی کار با فرآیند کامل توسعه یک پروژه مدرن وب را به دست میآورید.
همچنین نحوه انتشار برنامهها با استفاده از Vercel و مدیریت کد با Git/GitHub Workflow آموزش داده میشود تا بتوانید پروژههای خود را به شکل استاندارد در محیطهای واقعی مستقر کنید.
این دوره برای توسعهدهندگان فرانتاند، برنامهنویسان React، توسعهدهندگان وب و افرادی طراحی شده است که قصد دارند مهارت خود را در ساخت برنامههای سریع، مقیاسپذیر و SEO-Friendly با Next.js ارتقا دهند.
پس از پایان این دوره، توانایی ساخت برنامههای حرفهای Next.js، استفاده از روشهای مختلف Rendering، توسعه Routing پویا، بهینهسازی عملکرد، پیادهسازی SEO و استقرار پروژههای واقعی را خواهید داشت.
🎯 اهداف یادگیری
تسلط بر SSR، CSR، SSG و ISR برای توسعه برنامههای وب بهینه و سریع
بررسی مبانی React و توسعه Componentهای پیشرفته در محیط Next.js
پیادهسازی Best Practiceهای Next.js برای ساخت برنامههای مقیاسپذیر و کارآمد
ایجاد Dynamic Routes برای مدیریت محتواهای متنوع و ساختارهای پیچیده
توسعه و استقرار برنامههای کامل با استفاده از Vercel و Workflowهای Git/GitHub
بهینهسازی برنامههای Next.js برای موتورهای جستجو و شبکههای اجتماعی با استفاده از Metadata و SEO
طراحی ساختار مناسب برای پروژههای مدرن مبتنی بر Next.js
بهکارگیری تکنیکهای Performance Optimization برای افزایش سرعت برنامهها
توسعه یک پروژه واقعی Blog CMS از مرحله طراحی تا Deployment نهایی
استفاده از Next.js برای ساخت Web Applicationهای حرفهای، سریع و قابل توسعه
این دوره یک مسیر جامع برای یادگیری توسعه وب با Next.js ارائه میکند که از مبانی توسعه وب و مفاهیم پایه React آغاز شده و تا تکنیکهای پیشرفته Next.js و استقرار برنامههای واقعی ادامه پیدا میکند. در طول دوره، با معماری Next.js، روشهای مختلف رندرینگ، مدیریت مسیرها، بهینهسازی عملکرد و ساخت پروژههای کاربردی آشنا خواهید شد.
در بخش ابتدایی دوره، مفاهیم پایه توسعه وب و اصول ضروری React بررسی میشوند. شما یاد میگیرید چگونه با Components (کامپوننتها)، ساختار برنامههای React و روشهای ایجاد رابطهای کاربری مدرن کار کنید و پایه لازم برای توسعه پروژههای Next.js را به دست آورید.
سپس وارد مفاهیم اصلی Next.js میشوید و با روشهای مختلف تولید و نمایش محتوا مانند Server-Side Rendering (SSR)، Client-Side Rendering (CSR)، Static Site Generation (SSG) و Incremental Static Regeneration (ISR) آشنا خواهید شد. این تکنیکها به شما کمک میکنند برنامههایی بسازید که هم عملکرد بالایی داشته باشند و هم برای موتورهای جستجو بهینه باشند.
یکی از بخشهای مهم دوره، پیادهسازی Dynamic Routing (مسیریابی پویا) و مدیریت ساختار صفحات در برنامههای Next.js است. در این بخش یاد میگیرید چگونه برنامههایی ایجاد کنید که بتوانند محتواهای متنوع و پویا را به شکل حرفهای مدیریت کنند.
در ادامه، بهترین روشهای توسعه با Next.js بررسی میشوند؛ از جمله طراحی معماری مناسب برنامه، بهینهسازی عملکرد (Performance Optimization)، افزایش مقیاسپذیری (Scalability) و آمادهسازی پروژه برای محیطهای واقعی Production.
بخش عملی دوره شامل ساخت یک پروژه نهایی کامل است که در آن تمامی مفاهیم آموزشدادهشده به کار گرفته میشوند. شما یک برنامه کاربردی مانند Blog CMS (سیستم مدیریت محتوای وبلاگ) را از مرحله طراحی ساختار برنامه تا استقرار نهایی توسعه میدهید و تجربه عملی کار با فرآیند کامل توسعه یک پروژه مدرن وب را به دست میآورید.
همچنین نحوه انتشار برنامهها با استفاده از Vercel و مدیریت کد با Git/GitHub Workflow آموزش داده میشود تا بتوانید پروژههای خود را به شکل استاندارد در محیطهای واقعی مستقر کنید.
این دوره برای توسعهدهندگان فرانتاند، برنامهنویسان React، توسعهدهندگان وب و افرادی طراحی شده است که قصد دارند مهارت خود را در ساخت برنامههای سریع، مقیاسپذیر و SEO-Friendly با Next.js ارتقا دهند.
پس از پایان این دوره، توانایی ساخت برنامههای حرفهای Next.js، استفاده از روشهای مختلف Rendering، توسعه Routing پویا، بهینهسازی عملکرد، پیادهسازی SEO و استقرار پروژههای واقعی را خواهید داشت.
🎯 اهداف یادگیری
تسلط بر SSR، CSR، SSG و ISR برای توسعه برنامههای وب بهینه و سریع
بررسی مبانی React و توسعه Componentهای پیشرفته در محیط Next.js
پیادهسازی Best Practiceهای Next.js برای ساخت برنامههای مقیاسپذیر و کارآمد
ایجاد Dynamic Routes برای مدیریت محتواهای متنوع و ساختارهای پیچیده
توسعه و استقرار برنامههای کامل با استفاده از Vercel و Workflowهای Git/GitHub
بهینهسازی برنامههای Next.js برای موتورهای جستجو و شبکههای اجتماعی با استفاده از Metadata و SEO
طراحی ساختار مناسب برای پروژههای مدرن مبتنی بر Next.js
بهکارگیری تکنیکهای Performance Optimization برای افزایش سرعت برنامهها
توسعه یک پروژه واقعی Blog CMS از مرحله طراحی تا Deployment نهایی
استفاده از Next.js برای ساخت Web Applicationهای حرفهای، سریع و قابل توسعه
سرفصل ها
مقدمه
- مرور کلی دوره
- Next.js چیست و اصول اولیه توسعه وب
- ملزومات توسعه وب برای مبتدیان چیست؟
- یادداشت سریع در مورد خودآموزی
- React برای مبتدیان کامل چیست؟
- Next.js دقیقاً چیست و اصول اولیهی کاربرد آن
- نحوه کار وبسایتها و HTML برای مبتدیان کامل
یک وبسایت ساده از صفر بسازید
- ویرایشگر متن چیست و چگونه VSC را دریافت کنیم
- اولین وبسایت خود را با HTML و JS قدیمی برای مبتدیان کامل راهاندازی کنید
- دستکاری DOM با اصول اولیه وب جاوا اسکریپت
- برنامهنویسی دستوری در مقابل برنامهنویسی اعلانی و توسعه وب
ساخت یک پروژه React از ابتدا
- تبدیل کد وبسایت به یک برنامه React به صورت دستی با اشارهگر src
- مقدمهای بر Babel و JSX
ملزومات جاوا اسکریپت برای تسلط بر React
- دانلود Node.js و اینکه Node.js چیست
- آمادهسازی محیط یادگیری
- توابع در جاوا اسکریپت چیستند؟
- مثالی از نحوه عملکرد توابع در جاوا اسکریپت برای مبتدیان کامل
- عبارات تابعی در جاوا اسکریپت چیستند؟
- ترفند سوال مصاحبه جاوا اسکریپت با عبارات تابعی و سرگرمی کاربردی
- بالا بردن تابع در جاوا اسکریپت چیست؟
- نحوهی کار scope در جاوااسکریپت
- closureها چیستند و یک مثال با جاوااسکریپت توضیح داده شده است
- الگوی ماژول بسته شدن پیشرفته با کپسولهسازی حریم خصوصی دادهها
- توابع arrow و کاربردهای آنها در React چیست؟
- تخریب با جاوا اسکریپت
کدنویسی React از ابتدا - یادگیری گام به گام React
- نحوه نوشتن کامپوننتها در React
- نحوه عملکرد ساختار درختی کامپوننتها در React و کامپوننتهای تو در تو
- نحوهی کار props در React
- نگاشت از طریق لیستها در React
- قلابها و حالتهای React در React چیستند؟
مقدمهای بر Next.js برای توسعه حرفهای
- مهاجرت از React به Next.js
مفاهیم اصلی Next.js سطح بالاتر
- محیط توسعه و ساخت در مقابل ساخت در محیط عملیاتی با Next.js
- مقدمهای بر کامپایلر Next.js
- رفع ابهام از منظور از «کامپایلر» Next.js
- کوچکسازی (minification) در Next.js چیست؟
- بستهبندی در Next.js چیست؟
- تقسیم کد در Next.js چیست؟
- مبانی زمان ساخت در مقابل زمان اجرا
- اصول اولیه در برنامههای وب، کلاینت و سرور چیست؟
- رندرینگ در Next.js چیست؟
- پیشرندرینگ در Next.js چیست؟
- CSR چیست، رندر سمت کلاینت با Next.js
- نحوه عملکرد رندر سمت سرور به عنوان یک بررسی عمیقتر
- SSG در Next.js چیست؟
- CDNها و لبه (edge) در Next.js و Vercel چیستند؟
ساخت یک برنامه Next.js از ابتدا در Bootcamp Code-Along - صفر تا صد
- مقدمه و یادداشت سریع در مورد پروژه نهایی پیش رو
- نحوه شروع یک الگوی Next.js به صورت محلی
- بررسی اجمالی ساختار فایل قالب Next.js
- نحوه کار صفحات در Next.js
- پیشواکشی و تقسیم کد با ناوبری سمت کلاینت Link و CSN در Next.js
کار با متادیتا و داراییها در Next.js
- پروژه کیت شروع CSS را از Next.js official دانلود کنید
- نحوه بهینهسازی تصاویر با Next.js
- اسکریپتها و دادههای هدر و props با Next.js
- ماژولهای CSS و بهینهسازیهای Next.js با طرحبندی
- استایلدهی سراسری با Next.js
- سفارشیسازی استایلهای کاربردی با Next.js
- فراداده برای سئو و رسانههای اجتماعی با Next.js
- نوشتن کامپوننتهای طرحبندی پویا با Next.js
- نحوه استفاده از children و props در React و Next.js
پیشرندر و واکشی دادهها با Next.js
- تستهای پیشرندرینگ با Next.js
- تولید استاتیک در مقابل رندر سمت سرور با Next.js چیست؟
- تولید استاتیک با دادهها در Next.js
- الگوریتمهای پایه مختصر برای تمرین Next.js و پردازش دادهها
- تولید استاتیک و GetStaticProps با Next.js
- چه زمانی از GetStaticPropsServer با Next.js استفاده کنیم
- SSR در مقابل CSR و GetServerSideProps با Next.js
مسیرهای پویا با Next.js
- نحوه ایجاد مسیرهای پویا با Next.js
- getStaticPaths با پیادهسازی Next.js
- تسلط بر رندرینگ پویا و استاتیک با Next.js
- رندر کردن markdown و آسیبپذیریهای امنیتی با HTML تزریقشده
- بهبود صفحات پست پویا
- پرداخت یک کامپوننت Next.js با استایلبندی
- واکشی دادهها و کوئریهای پایگاه داده به همراه ISR با Next.js
- مسیرهای API با Next.js
نحوهی استقرار یک برنامهی Next.js از ابتدا
- گیتهاب چیست و چگونه میتوان با آن شروع به کار کرد
- نحوهی انتشار برنامهی Next.js خود در گیتهاب
- برنامه خود را روی Vercel مستقر کنید و تغییرات را با GitHub ثبت کنید
- ساخت ویژگیهای چندشاخهای دنیای واقعی در گیتهاب با React
- درخواستهای Pull و ادغام بررسیهای کد با استقرار خودکار Vercel در GitHub