آموزش معماری برنامه های React با Next.js

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

پایه گذاری: طراحی معماری در React Apps Laying the Foundation: Architectural Design in React Apps

• بررسی نسخه Version Check

• مقدمه Introduction

• به تصمیمات واکنش نشان دهید React Decisions

• طراحی معماری در React Apps Architectural Design in React Apps

• اپلیکیشن Bethany’s Pie Shop Bethany’s Pie Shop App

استفاده از Next.js و سایر چارچوب‌ها برای ساخت برنامه‌های React Full-stack Leveraging Next.js and Other Frameworks to Build Full-stack React Apps

• React Frameworks درجه تولید Production-grade React Frameworks

• React Frameworks: Next.js در مقابل Remix React Frameworks: Next.js vs. Remix

• ویژگی های Next.js Next.js Features

• نسخه ی نمایشی: برنامه Bethany’s Pie Shop را راه اندازی کنید Demo: Set up Bethany’s Pie Shop App

• صفحات و مسیریابی Pages and Routing

• نسخه ی نمایشی: ایجاد صفحات و مسیرها Demo: Create Pages and Routes

• نسخه ی نمایشی: طرح بندی Demo: Layout

• خلاصه Summary

بهبود معماری React با اجزای سرور Enhancing React Architecture with Server Components

• اجزای سرور React چیست؟ What Are React Server Components?

• رندر کردن اجزای سرور و کلاینت Rendering Server and Client Components

• نسخه ی نمایشی: ساختار کامپوننت در Bethany’s Pie Shop Demo: Component Structure in Bethany’s Pie Shop

• چرا اجزای سرور؟ Why Server Components?

• بهترین شیوه ها Best Practices

بهینه سازی عملکرد وب با تکنیک های رندر سرور Optimize Web Performance with Server Rendering Techniques

• واکشی داده های ایستا Static Data Fetching

• نسخه ی نمایشی: واکشی داده های ایستا - منوی واکشی Demo: Static Data Fetching - Fetch Menu

• ذخیره سازی Caching

• نسخه آزمایشی: واکشی استاتیک داده با اعتبار سنجی مجدد Demo: Static Data Fetching with Revalidation

• رندر سمت سرور (SSR) Server-side Rendering (SSR)

• تمرین کد و خلاصه ماژول Code Exercise and Module Summary

استفاده موثر از تعلیق برای رابط کاربری پیشرفته Effective Use of Suspense for Enhanced UI

• مقدمه تعلیق Suspense Introduction

• تعلیق چگونه کار می کند؟ How Does Suspense Work?

• نسخه ی نمایشی: مرزهای تعلیق را در Bethany’s Pie Shop تنظیم کنید Demo: Set up Suspense Boundaries in Bethany’s Pie Shop

• نسخه ی نمایشی: کامپوننت در حال بارگذاری تعلیق Demo: Suspense Loading Component

• بهترین روش ها برای استفاده از تعلیق Best Practices for Using Suspense

Refactoring و بهترین روش ها با React و Next.js Refactoring and Best Practices with React and Next.js

• به روز رسانی های سمت مشتری با useSWR Client-side Updates with useSWR

• نسخه ی نمایشی: سبد خرید با useSWR Hook Demo: Shopping Cart with useSWR Hook

• نسخه ی نمایشی: نوشتن اجزای قابل استفاده مجدد Demo: Composing Reusable Components

• نسخه ی نمایشی: Next.js در حال بارگیری صفحات Demo: Next.js Loading Pages

• نسخه ی نمایشی: یافت نشد و صفحات خطا Demo: Not Found and Error Pages

• نسخه ی نمایشی: پاکسازی عمومی کد Demo: General Cleanup of Code

• مشکلات رایج در توسعه React Common Pitfalls in React Development

• ملاحظات بلند مدت برای React App Architecture Long-term Considerations for React App Architecture

• خلاصه دوره Course Summary