آموزش پشته فریلنسری: پروژه واقعی با Next.js و Strapi - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• پشته فریلنسری چیست؟ What is the freelance stack?

• معرفی دوره Course intro

• نحوه گذراندن این دوره How to go through this course

1. دوره سریع Next.js 1. Next.js Crash Course

• مسیریابی پویا (Dynamic Routing) Dynamic routing

• دریافت داده‌ها (Data Fetching) Data fetching

• صفحات یافت نشد (Not Found) Not found pages

• مسیریابی ساده در Next.js Simple routing in Next.js

• لینک‌دهی بین صفحات Linking from page to page

• طراحی لایوت در Next.js Layouting in Next.js

• راه‌اندازی پروژه Next.js Setting up a Next.js project

• چرا از Next.js استفاده می‌کنیم؟ Why are we using Next.js?

• بررسی کلی کامپوننت‌های سرور و کلاینت Server and client components overview

2. آشنایی توسعه‌دهندگان با فیگما 2. Developer Intro to Figma

• فیگما چیست و چگونه از آن استفاده کنیم What Figma is and how to use it

3. راه‌اندازی اولیه پروژه Next.js، Strapi و Sass 3. Initial Project Setup Next.js, Strapi, and Sass

• مرور کلی ساختار پروژه (و دلیل این نوع پیاده‌سازی) Overview of our setup (and why we set it up this way)

• نصب و بررسی کلی Strapi Strapi installation and overview

• ویدیو استایل‌دهی: راه‌اندازی Sass Styling video: Sass setup

• تنظیمات پایه Next.js Next.js base setup

• ویدیو استایل‌دهی: متغیرها و تایپوگرافی Styling video: Variables and typography

4. صفحه لندینگ و صفحه تجربه با کامپوننت‌های Layout 4. Landing Page and Experience Page with Layout Components

• استایل‌دهی: هدر Styling: Header

• صفحه تجربه: استفاده مجدد از بخش Hero و بلوک‌های اطلاعاتی Experience page: Reuse created hero section and infoblocks

• استایل‌دهی: فوتر Styling: Footer

• استایل‌دهی: بخش Hero Styling: Hero section

• ساختار JSX هدر Header JSX structure

• ساختار JSX فوتر Footer JSX structure

• استایل‌دهی: تغییر رنگ هدر بر اساس مسیر صفحه Styling: Adjust header colour per path

• استایل‌دهی: بلوک‌های اطلاعاتی (InfoBlocks) Styling: InfoBlocks

• ساختار JSX بلوک‌های اطلاعاتی InfoBlocks JSX structure

• ساختار JSX بخش Hero Hero section JSX structure

5. اتصال فرانت‌اند به Strapi 5. Connecting Our Frontend to Strapi

• ایجاد دکمه از داده‌های InfoBlock استراپی در صفحه Create button from InfoBlock Strapi data on page

• دریافت داده‌ها از Strapi و پردازش آن‌ها Fetch data from Strapi and process it

• ایجاد Content Type برای InfoBlock در Strapi Creating InfoBlock content type on Strapi

• دریافت داده‌های InfoBlock از Strapi Fetch InfoBlock data on Strapi

• رندر کردن InfoBlockها در صفحه تجربه Render InfoBlocks on experience page

• استفاده از Single Content Type برای ایجاد InfoBlockهای هر صفحه Use single content type in Strapi to create InfoBlocks per page

• رندر کردن InfoBlockها در صفحه Render InfoBlocks on page

6. صفحه اصلی وبلاگ 6. Main Page of the Blog

• استایل‌دهی کامپوننت آیتم‌های ویژه Styling featured items component

• قابلیت کامپوننت عضویت در خبرنامه Functionality subscribe to newsletter component

• ساختار JSX مقاله برجسته Highlight Article JSX structure

• استایل‌دهی: مقاله برجسته Styling: Highlight article

• ساختار JSX کامپوننت آیتم‌های ویژه Featured items component JSX structure

• ساختار JSX عضویت در خبرنامه Subscribe to newsletter JSX structure

• استایل‌دهی: کامپوننت عضویت در خبرنامه Styling: Subscribe to newsletter component

7. پیاده‌سازی وبلاگ در فرانت‌اند از طریق Strapi و Next.js 7. Implement Blog on Frontend through Strapi and Next.js

• وارد کردن داده‌های مقالات وبلاگ در Strapi Input blog article data on Strapi

• ایجاد مسیرهای پویا برای تمام مقالات وبلاگ Create dynamic routes for all blog articles

• رندر مقالات از داده‌های Strapi در صفحه اصلی وبلاگ Render articles from Strapi data on main page of the blog

• ایجاد نوع مقاله وبلاگ در Strapi Create blog article type on Strapi

8. ایجاد مقاله وبلاگ کاملاً قابل شخصی‌سازی 8. Create Fully Customizable Blog Article

• اصلاح آیتم مقاله برای بخش ویژه در صفحه اصلی Fix article item for featured items on homepage

• استایل‌دهی: کامپوننت متن به همراه تصویر Styling: Text with image component

• استایل‌دهی: بخش Hero مقاله Styling: Article hero section

• ساختار JSX بخش وبلاگ در صفحه اصلی Blog section homepage JSX

• استایل‌دهی: بخش وبلاگ در صفحه اصلی Styling: Blog section homepage

• کامپوننت عمومی مقاله برای رندر کامپوننت‌های مختلف بر اساس داده‌های Strapi Generic article component to render different component depending on Strapi data

• استایل‌دهی: کامپوننت تصویر Styling: Image component

• ساختار JSX عنوان مقاله Article headline JSX

• ساختار JSX بخش Hero مقاله Article hero section JSX

• استایل‌دهی: کامپوننت مقدمه مقاله Styling: Article intro component

• ساختار JSX کامپوننت متن به همراه تصویر Text with image component JSX

• استایل‌دهی: عنوان مقاله Styling: Article headline

• ایجاد Dynamic Zone در Strapi برای محتوای وبلاگ قابل شخصی‌سازی Create dynamic zone in Strapi for customizable blog content

• بخش مقالات دیگر در صفحه تکی مقاله Other articles section on individual blog page

• ایجاد داده‌ها برای مقاله برجسته Creating data for highlight article

• ساختار JSX پاراگراف مقاله Article paragraph JSX

• استایل‌دهی: پاراگراف مقاله Styling: Article paragraph

• ساختار JSX کامپوننت تصویر Image component JSX

• ساختار JSX کامپوننت مقدمه مقاله Article intro component JSX

9. بخش رویدادها: ایجاد قابلیت ثبت‌نام برای سورف‌کمپ‌ها و رویدادها 9. Events Section: Create Signup Functionality for Offered Surfcamps and Events

• تولید پیش‌فرض (Pregenerate) صفحات تکی رویدادها Pregenerate individual event pages

• درخواست‌های Post در Strapi برای ثبت‌نام خبرنامه Post requests in Strapi with the newsletter signup

• استایل‌دهی: فرم ثبت‌نام Styling: Signup form

• تغذیه داده‌های تمام رویدادها به Strapi Feeding data into Strapi for all events

• دریافت و فیلتر رویدادهای آینده با کوئری رشته‌ای از Strapi Fetch and filter upcoming events with a string query from Strapi

• اتصال فرانت‌اند به کامپوننت ثبت‌نام در Strapi Hook up frontend to signup component in Strapi

• پردازش داده‌های رویداد Event data processing

• اصلاح کامپوننت آیتم‌های ویژه برای صفحه تکی رویداد Adjust featured items component for individual event page

• ساختار JSX فرم ثبت‌نام Signup form JSX

• دریافت رویدادهای بیشتر در صفحه تکی رویداد و صفحه تشکر Fetch more events on individual event page & thank you

• تایپ‌های محتوایی شرکت‌کننده و رویداد در Strapi Strapi participant and event content type

• رندر صفحه تکی رویداد بر اساس داده‌های Strapi Render individual event page based off Strapi data

• استایل‌دهی: اصلاح کامپوننت FeaturedItem برای رویداد Styling: FeaturedItem component adjusted for event

• قابلیت فرم ثبت‌نام: ارسال داده‌ها به Strapi از صفحه اصلی رویدادها Signup form functionality: Sending data to Strapi from main events page

• ثبت‌نام برای رویداد خاص Sign up for specific event

10. استقرار روی Heroku 10. Deployment to Heroku

• جایگزینی مسیر تصاویر در دیتابیس Production برای استفاده از AWS S3 Replace image paths in production db to use AWS S3 bucket images

• مدیریت آپلود تصاویر در محیط Production با AWS S3 Handle image uploads in production with AWS S3

• مهاجرت دیتابیس محلی از SQLite به Postgres در دیتابیس Production Migrate local database from SQLite to Postgres to the production database

• استقرار سرور Strapi روی Heroku Deploy Strapi server to Heroku

• مرور کلی فرآیند استقرار Deployment overview

• تفاوت بین Strapi در حالت Production و توسعه محلی Difference between production Strapi and local development

• استقرار فرانت‌اند Next.js روی Heroku Deployment of Next.js frontend to Heroku