آموزش Next.js با مثال

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

شروع شدن Getting Started

• وبلاگ بعدی: بررسی اجمالی Next Blog: Overview

• ابزارهای مورد نیاز Required Tools

• به روز رسانی ها و اصلاحات Updates and Corrections

• راه اندازی پروژه Next.js Next.js Project Setup

• کد منبع Source Code

• پیش رندر Pre-rendering

• توسعه در مقابل سرور تولید Development vs Production Server

مسیریابی و ناوبری Routing and Navigation

• افزودن صفحات جدید Adding New Pages

• مولفه پیوند بعدی Next Link Component

• مولفه NavBar مشترک Shared NavBar Component

• جزء برنامه سفارشی Custom App Component

• جزء اصلی بعدی Next Head Component

طراحی ظاهر Styling

• سبک های جهانی Global Styles

• سبک های کامپوننت با JSX مدل دار Component Styles with Styled JSX

• تصاویر و سایر دارایی ها Images and Other Assets

در حال بارگیری داده ها Loading Data

• صفحه اول پست First Post Page

• نحو Markdown Markdown Syntax

• تابع getStaticProps getStaticProps Function

• getStaticProps در حالت تولید getStaticProps in Production Mode

• خواندن یک فایل Reading a File

• ماژول Lib Lib Module

• رندر Markdown Rendering Markdown

• موضوع جلو Front Matter

• مسیر پویا و getStaticPaths Dynamic Route and getStaticPaths

• فهرست کردن فایل ها در یک پوشه Listing Files in a Folder

• لیست پست ها Listing Posts

• مسیرهای پویا در حالت تولید Dynamic Routes in Production Mode

عملکرد سمت مشتری Client-side Functionality

• کامپوننت ThemeSwitch ThemeSwitch Component

• سبک های حالت تاریک Dark Mode Styles

• کامپوننت دارک تم DarkTheme Component

• هیدراتاسیون Hydration

• ذخیره تنظیمات برگزیده در فضای ذخیره‌سازی محلی Saving Preferences to Local Storage

• تشخیص ویژگی Feature Detection

گسترش Deployment

• گزینه های استقرار Deployment Options

• پلتفرم Vercel Vercel Platform

• صادرات به عنوان یک وب سایت ثابت Exporting as a Static Website

• سرور لینوکس با Nginx Linux Server with Nginx

• سرور لینوکس با Node.js Linux Server with Node.js

فروشگاه بعدی: راه اندازی Next Shop: Setup

• فروشگاه بعدی: نمای کلی Next Shop: Overview

• برنامه بعدی را ایجاد کنید Create Next App

• پشتیبانی TypeScript TypeScript Support

• کد منبع Source Code

• راه اندازی Tailwind CSS Tailwind CSS Setup

• Utility-First CSS Utility-First CSS

• معماری سطح بالا High-level Architecture

• Strapi Headless CMS Strapi Headless CMS

• توجه: نسخه Strapi Note: Strapi Version

• راه اندازی Backend Backend Setup

واکشی داده ها Data Fetching

• نمایش محصولات Displaying Products

• در حال واکشی داده ها در سمت سرور Fetching Data Server-side

• واکشی داده ها در سمت مشتری Fetching Data Client-side

• بازسازی استاتیکی افزایشی Incremental Static Regeneration

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

• مسیرهای API API Routes

• فراخوانی مسیرهای API Calling API Routes

• انتخاب یک استراتژی واکشی داده Choosing a Data Fetching Strategy

• لینک های صفحه محصول Product Page Links

• صفحه محصول Product Page

• بازسازی صفحات محصول Regenerating Product Pages

• اعتبار مجدد درخواستی On-demand Revalidation

• بازگشت: مسدود کردن Fallback: Blocking

• بازگشت و صفحه یافت نشد Fallback and Page Not Found

• تابع fetchJson مشترک Shared fetchJson function

• کلاس خطای سفارشی Custom Error Class

• Backend و Backend در دسترس نیستند Fallback and Backend Unavailable

• متغیرهای محیطی Environment Variables

طراحی واکنشگرا و بهینه سازی تصویر Responsive Design and Image Optimization

• کارت محصول Product Card

• شبکه پاسخگو Responsive Grid

• تصاویر محصول Product Images

• مولفه تصویر بعدی Next Image Component

• صفحه محصول واکنش گرا Responsive Product Page

احراز هویت Authentication

• احراز هویت Strapi Strapi Authentication

• کامپوننت صفحه مشترک Common Page Component

• فرم ورود Sign In Form

• فرم حالت و اعتبار Form State and Validation

• درخواست API به سیستم وارد شوید Sign In API Request

• خطا و بارگیری ایالات Error and Loading States

• مسیر API با POST API Route with POST

• ورود به API Route Login API Route

• تنظیم یک کوکی Setting a Cookie

• نوار نوار با احراز هویت NavBar with Authentication

• مسیر API کاربر User API Route

• در حال بارگیری اطلاعات کاربر Loading User Data

• خروج از سیستم Signing Out

React Query React Query

• چرا React Query Why React Query

• useQuery Hook useQuery Hook

• useUser Custom Hook useUser Custom Hook

• استفاده از قلاب جهش useMutation Hook

• به روز رسانی کش Query Updating the Query Cache

• استفاده از قلاب سفارشی SignIn useSignIn Custom Hook

• استفاده از قلاب سفارشی SignOut useSignOut Custom Hook

سبد خرید (تمرینات) Shopping Cart (Exercises)

• مجموعه اقلام سبد خرید Cart Items Collection

• صفحه سبد خرید Cart Page

• مسیر API سبد خرید Cart API Route

• واکشی اقلام سبد خرید Fetching Cart Items

• نمایش اقلام سبد خرید Displaying Cart Items

• POST Cart Handler POST Cart Handler

• افزودن به ابزارک سبد خرید Add to Cart Widget

• افزودن به سبد خرید جهش Add to Cart Mutation

• بسته شدن Wrap Up

نتیجه Conclusion

• تبریک و پاداش Congratulations and Bonus