دوره آموزشی مجموعه فریلنسری: پروژه واقعی با Next.js و Strapi
12 ساعت 20 دقیقهمتوسط2026-02-25
مدرسین

Packt Publishing
جزئیات دوره
این دوره یک آموزش کاملاً پروژهمحور و قدمبهقدم برای ساخت وبسایتهای واقعی با استفاده از Next.js و Strapi هست. اگر دنبال این هستی که از طراحی UI در Figma برسونی به یک سایت واقعی و قابل استفاده برای مشتری، این دوره دقیقاً همون مسیر رو بهت نشون میده.
در طول آموزش، یک پروژه واقعی مثل وبسایت سورفکمپ (Surfcamp) رو از صفر تا صد میسازی؛ از طراحی اولیه گرفته تا پیادهسازی کامل و انتشار آنلاین سایت. این یعنی هم بخش فرانتاند رو یاد میگیری، هم بکاند سبک و کاربردی با Headless CMS.
یکی از نکات مهم این دوره اینه که یاد میگیری چطور از Strapi به عنوان یک سیستم مدیریت محتوا (CMS بدون سر) استفاده کنی تا بتونی بلاگ، فرم ثبتنام، و محتوای پویا به سایت اضافه کنی بدون اینکه نیاز باشه همه چیز رو دستی کدنویسی کنی.
در بخش Next.js هم یاد میگیری چطور صفحات داینامیک بسازی، دادهها رو از API بگیری، و بین سمت سرور و کلاینت به درستی مدیریت کنی. همچنین مفهوم Server-side و Client-side Rendering رو به شکل کاربردی درک میکنی.
در کنار اینها، تمرکز زیادی روی تبدیل طراحیهای Figma به وبسایت واقعی وجود داره، یعنی یاد میگیری چطور دقیقاً چیزی که طراح ساخته رو به کد تبدیل کنی و یک سایت کاملاً مشابه طراحی اولیه بسازی.
همچنین با استفاده از CSS ساده بدون وابستگی به فریمورکهای پیچیده، میتونی استایلدهی رو انجام بدی و کنترل کامل روی ظاهر سایت داشته باشی.
در نهایت، این دوره بهت کمک میکنه یک ورکفلو کامل طراحی تا توسعه رو یاد بگیری؛ چیزی که برای فریلنسرها و توسعهدهندههایی که میخوان پروژههای واقعی تحویل بدن خیلی مهمه.
اهداف یادگیری
ساخت وبسایتهای واقعی با Next.js و Strapi
طراحی و پیادهسازی پروژههای مشتریمحور بدون نیاز به ابزارهای پیچیده
استفاده از CSS ساده برای استایلدهی صفحات وب
اتصال دادههای پیچیده از Strapi API به فرانتاند
درک مفهوم Server-side و Client-side Rendering
تبدیل طراحیهای Figma به وبسایت واقعی
پیادهسازی Headless CMS در پروژههای واقعی
ساخت بلاگ و فرم ثبتنام در وبسایت
مدیریت محتوای داینامیک در پروژههای وب
ترکیب طراحی سایت و کدنویسی برای ایجاد ورکفلو حرفهای
در طول آموزش، یک پروژه واقعی مثل وبسایت سورفکمپ (Surfcamp) رو از صفر تا صد میسازی؛ از طراحی اولیه گرفته تا پیادهسازی کامل و انتشار آنلاین سایت. این یعنی هم بخش فرانتاند رو یاد میگیری، هم بکاند سبک و کاربردی با Headless CMS.
یکی از نکات مهم این دوره اینه که یاد میگیری چطور از Strapi به عنوان یک سیستم مدیریت محتوا (CMS بدون سر) استفاده کنی تا بتونی بلاگ، فرم ثبتنام، و محتوای پویا به سایت اضافه کنی بدون اینکه نیاز باشه همه چیز رو دستی کدنویسی کنی.
در بخش Next.js هم یاد میگیری چطور صفحات داینامیک بسازی، دادهها رو از API بگیری، و بین سمت سرور و کلاینت به درستی مدیریت کنی. همچنین مفهوم Server-side و Client-side Rendering رو به شکل کاربردی درک میکنی.
در کنار اینها، تمرکز زیادی روی تبدیل طراحیهای Figma به وبسایت واقعی وجود داره، یعنی یاد میگیری چطور دقیقاً چیزی که طراح ساخته رو به کد تبدیل کنی و یک سایت کاملاً مشابه طراحی اولیه بسازی.
همچنین با استفاده از CSS ساده بدون وابستگی به فریمورکهای پیچیده، میتونی استایلدهی رو انجام بدی و کنترل کامل روی ظاهر سایت داشته باشی.
در نهایت، این دوره بهت کمک میکنه یک ورکفلو کامل طراحی تا توسعه رو یاد بگیری؛ چیزی که برای فریلنسرها و توسعهدهندههایی که میخوان پروژههای واقعی تحویل بدن خیلی مهمه.
اهداف یادگیری
ساخت وبسایتهای واقعی با Next.js و Strapi
طراحی و پیادهسازی پروژههای مشتریمحور بدون نیاز به ابزارهای پیچیده
استفاده از CSS ساده برای استایلدهی صفحات وب
اتصال دادههای پیچیده از Strapi API به فرانتاند
درک مفهوم Server-side و Client-side Rendering
تبدیل طراحیهای Figma به وبسایت واقعی
پیادهسازی Headless CMS در پروژههای واقعی
ساخت بلاگ و فرم ثبتنام در وبسایت
مدیریت محتوای داینامیک در پروژههای وب
ترکیب طراحی سایت و کدنویسی برای ایجاد ورکفلو حرفهای
سرفصل ها
مقدمه
- مقدمه دوره
- مجموعه فریلنسری چیست؟
- نحوه گذراندن این دوره
دوره فشرده Next.js
- چرا از Next.js استفاده میکنیم؟
- راه اندازی یک پروژه Next.js
- مسیریابی ساده در Next.js
- طرح بندی در Next.js
- لینک دادن از صفحهای به صفحه دیگر
- مروری بر اجزای سرور و کلاینت
- واکشی دادهها
- مسیریابی پویا
- صفحات یافت نشد
معرفی فیگما برای توسعهدهندگان
- فیگما چیست و چگونه از آن استفاده کنیم
راهاندازی اولیه پروژه Next.js، Strapi و Sass
- تنظیمات پایه Next.js
- استایلدهی به ویدیو - تنظیمات Sass
- استایلدهی به ویدیو - متغیرها و تایپوگرافی
- مروری بر تنظیمات ما (و اینکه چرا آن را به این روش تنظیم کردهایم)
- نصب و بررسی اجمالی تسمه
صفحه فرود و صفحه تجربه با اجزای طرحبندی
- ساختار JSX هدر
- استایلدهی - سربرگ
- ساختار JSX پاورقی
- استایلدهی - فوتر
- ساختار JSX بخش Hero
- استایلینگ - بخش قهرمان
- ساختار JSX در InfoBlocks
- استایلینگ - اینفو بلاکس
- صفحه تجربه - استفاده مجدد از بخش قهرمان ایجاد شده و بلوکهای اطلاعات
- استایلدهی - تنظیم رنگ هدر برای هر مسیر
اتصال فرانتاند ما به Strapi
- ایجاد نوع محتوای InfoBlock در Strapi
- استفاده از نوع محتوای واحد در Strapi برای ایجاد InfoBlocks در هر صفحه
- دریافت دادههای InfoBlock در Strapi
- دریافت دادهها از Strapi و پردازش آنها
- نمایش InfoBlocks در صفحه
- ایجاد دکمه از دادههای InfoBlock Strapi در صفحه
- نمایش InfoBlocks در صفحه تجربه
صفحه اصلی وبلاگ
- برجسته کردن ساختار JSX مقاله
- استایلینگ - مقاله هایلایت
- در خبرنامه JSX عضو شوید
- استایلدهی - کامپوننت عضویت در خبرنامه
- قابلیت اشتراک در خبرنامه
- ساختار JSX کامپوننت آیتمهای ویژه
- استایلدهی به کامپوننت آیتمهای ویژه
پیادهسازی وبلاگ در فرانتاند از طریق Strapi و Next.js
- ایجاد نوع مقاله وبلاگ در Strapi
- وارد کردن دادههای مقاله وبلاگ در Strapi
- نمایش مقالات از دادههای Strapi در صفحه اصلی وبلاگ
- ایجاد مسیرهای پویا برای همه مقالات وبلاگ
ایجاد مقاله وبلاگ کاملاً قابل تنظیم
- ایجاد ناحیه پویا در Strapi برای محتوای وبلاگ قابل تنظیم
- ایجاد دادهها برای مقاله برجسته
- بخش قهرمان مقاله JSX
- استایلدهی - بخش قهرمان مقاله
- کامپوننت مقدمه مقاله JSX
- استایلدهی - کامپوننت مقدمه مقاله
- کامپوننت مقاله عمومی برای رندر کامپوننتهای مختلف بسته به دادههای Strapi
- تیتر مقاله JSX
- استایلینگ - تیتر مقاله
- متن با کامپوننت تصویر JSX
- استایلدهی - متن با کامپوننت تصویر
- بند JSX ماده
- سبکبندی - پاراگراف مقاله
- کامپوننت تصویر JSX
- استایلدهی - کامپوننت تصویر
- بخش سایر مقالات در صفحه وبلاگ جداگانه
- صفحه اصلی بخش وبلاگ JSX
- استایلینگ - صفحه اصلی بخش وبلاگ
- اصلاح گزینه مقاله برای موارد ویژه در صفحه اصلی
بخش رویدادها - ایجاد قابلیت ثبت نام برای اردوهای موجسواری و رویدادهای ارائه شده
- ارسال درخواست در Strapi با ثبت نام در خبرنامه
- اتصال frontend به کامپوننت ثبت نام در Strapi
- نوع محتوای شرکتکننده و رویداد Strapi
- وارد کردن دادهها به Strapi برای همه رویدادها
- فرم ثبت نام JSX
- استایل - فرم ثبت نام
- قابلیت فرم ثبت نام - ارسال داده به Strapi از صفحه رویدادهای اصلی
- صفحات رویداد تکی را از قبل تولید کنید
- پردازش دادههای رویداد
- رندر کردن صفحه رویداد به صورت جداگانه بر اساس دادههای Strapi
- ثبت نام برای رویداد خاص
- دریافت و فیلتر کردن رویدادهای آینده با یک کوئری رشتهای از Strapi
- تنظیم کامپوننت آیتمهای ویژه برای صفحه رویداد مجزا
- استایلدهی - کامپوننت FeaturedItem برای رویداد تنظیم شد
- رویدادهای بیشتر را در صفحه رویدادهای جداگانه دریافت کنید و از شما متشکرم
استقرار در Heroku
- مرور کلی استقرار
- سرور Strapi را روی Heroku مستقر کنید
- تفاوت بین تولید Strapi و توسعه محلی
- انتقال پایگاه داده محلی از SQLite به Postgres به پایگاه داده عملیاتی
- مدیریت آپلود تصاویر در محیط عملیاتی با AWS S3
- جایگزینی مسیرهای تصویر در پایگاه دادهی عملیاتی برای استفاده از تصاویر باکت AWS S3
- استقرار frontend Next.js در Heroku
دوره های مرتبط
- دوره آموزشی عکاسی پرتره: فارغ التحصیلان دبیرستان
- دوره آموزشی استراتژی های کار آزاد برای سازندگان ویدیو و موشن گرافیک
- دوره آموزشی تجربه کاربری آزاد: مدیریت مشتریان
- دوره آموزشی برنامه ریزی نمونه کارها در زمینه طراحی وب: توسعه تجارت فریلسنری شما
- دوره آموزشی راه اندازی یک کسب و کار طراحی: توافقنامه های طراح-مشتری
- دوره آموزشی اصول راه اندازی یک کسب و کار عکاسی
- دوره آموزشی نحوه تبدیل شدن به فریلنسر و دریافت دستمزد با ساخت تبلیغات دیجیتال
- دوره آموزشی راه اندازی یک کسب و کار طراحی: شروع به کار کوچک
مسیرهای مرتبط
- مسیر آموزشی تبدیل شدن به یک مهندس DevOps
- مسیر آموزشی تبدیل شدن به یک مدیر شبکه
- مسیر آموزشی تبدیل شدن به یک توسعه دهنده وب
- مسیر آموزشی آماده شدن برای آزمون AWS Certified Developer - Associate (DVA-C01)
- مسیر آموزشی تبدیل شدن به یک کارمند دورکار موفق
- مسیر آموزشی یک کسب و کار طراحی راه اندازی کنید
- مسیر آموزشی پیشرو بودن در توسعه Azure
- مسیر آموزشی بهبود بخشیدن مهارت های نورپردازی خود