آموزش Next.js و React عملی - با Next.js یک WebApp واقعی بسازید

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

مقدمه Intro

• ایجاد برنامه بعدی با Typescript Create-next-app with Typescript

• بررسی مخزن Github Github repo review

• NextJS و Storybook NextJS and Storybook

• بهینه سازی تصاویر و کتاب داستان Images Optimization and Storybook

• زیباتر Prettier

• CSS-IN-JS. EmotionJS CSS-IN-JS. EmotionJS

• جزء اول The first component

• مرور Review

قدرت کتاب داستان The power of Storybook

• JSX در نگاه JSX at Glance

• کامپایل JSX JSX compilation

• کتابخانه تست جست و واکنش Jest and React Testing Library

• تم های تاریک/روشن در کتاب داستان Dark / Light themes in Storybook

• نام مستعار، فونت ها و سبک های جهانی Aliases, Fonts and Global styles

• نام مستعار و تم برای Jest Aliases and themes for Jest

• تعاملات افزونه کتاب داستان Storybook addon interactions

• افزونه کتاب داستان a11y Storybook addon a11y

• تست بصری و کروماتیک Visual testing and Chromatic

• مرور Review

کتاب داستان و کتابخانه اجزاء Storybook and Components Library

• جزء کاشی Tile component

• جزء نماد Icon component

• Refactoring Refactoring

• جزء چک باکس Checkbox component

• قلاب سفارشی useId Custom hook useId

• سوئیچ جزء Switch component

• جزء لوگو Logo component

• دکمه آیکون Icon Button

• جزء ورودی قسمت 1 Input component part 1

• جزء ورودی قسمت 2 Input component part 2

• بازسازی اجزای ورودی Input component refactoring

چیدمان و صفحات اولیه Basic layout and pages

• بخش 1 طرح بندی اولیه را ایجاد کنید Create basic layout part 1

• بخش 2 طرح بندی اولیه را ایجاد کنید Create basic layout part 2

• تغییر دهنده تم Theme toggler

• تصویر بعدی و جزء دوره Next Image and Course component

• بازسازی اجزای دوره Course component refactoring

• صفحه اصلی قسمت 1 Home page part 1

• صفحه اصلی قسمت 2 Home page part 2

• صفحه خطای سفارشی 404 Custom 404 error page

• Versel استقرار Versel deploy

• Github Actions و Chromatic Github Actions and Chromatic

• تست CI + لینت CI Test + Lint

• مرور Review

• مرور Review

ورود و ثبت نام Login and Registration

• مقدمه و بازسازی Intro and refactoring

• Strapi init Strapi init

• کاربر، نقش ها و جریان اعتبار User, roles and auth flow

• صفحه ورود به سیستم قسمت 1 Login page part 1

• صفحه ورود قسمت 2 Login page part 2

• React hook form and login React hook form and login

• فرم قلاب واکنش، اعتبارسنجی و آزمایشات React hook form, validation and tests

• اصلاح سبک ها، اضافه کردن دکمه ورود به سیستم Fix styles, add login button

• رفع سوسو زدن تغییر موضوع Theme toggle flicker fix

• صفحه ثبت نام Registration page

• صفحه کاربر و بررسی User Page and review

Auth flow و Redux Auth flow and Redux

• Deps را به روز کنید Update deps

• مدیریت دولتی و Redux-Toolkit State management and Redux-Toolkit

• برش کاربر User slice

• اقدامات همگام Async actions

• آزمایش‌های اقدامات Async Async actions tests

• تست های ادغام و msw Integration tests and msw

• ورود به سیستم/جریان ثبت نام Login / Registration flow

• React-redux و جریان ورود به سیستم React-redux and login flow

• React-redux در جست و کتاب داستان React-redux in Jest and Storybook

• جریان ورود و ثبت نام کامل Full login flow and registration

• موارد تست صفحه را اضافه کنید Add page test cases

مطالب با Next و Strapi Content with Next and Strapi

• Strapi را ارتقا دهید Upgrade Strapi

• نقطه پایان دوره را با داده اضافه کنید Add courses endpoint with data

• SSG، getStaticProps و صفحه فهرست SSG, getStaticProps and index page

• حل تست ها و کتاب داستان Fix tests and storybook

• بررسی استقرار با docker و AWS Review deploy with docker and AWS

• رفع مشکل استقرار Fix deploy problem

• صفحه دوره، SSG و getStaticPath Course page, SSG and getStaticPath

• رفتار ورودی جستجو Search input behavior

• دوره های جستجو Search courses

• SSR + getServerSideProps SSR + getServerSideProps

• رفع مشکلات و بررسی Fix problems and review