آموزش دوره Zero to Hero NextJS 14 برای توسعه پروژه واقعی

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

معرفی و نصب Introduction & Installation

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

• نصب نرم افزار Software Installation

• درباره مربی شما About your Instructor

• NextJS چیست و چه تفاوتی با ReactJS دارد What is NextJS and How its different then ReactJS

• ایجاد و اجرای برنامه بعدی Creating and Running the Next App

• درک ساختار پوشه برنامه بعدی Understanding the folder structure of the next app

• افزودن بوت استرپ به برنامه بعدی Adding Bootstrap to the next app

آشنایی با NextJS 14.0 و مفاهیم آن Understanding NextJS 14.0 and its concepts

• درک جریان برنامه Next Understanding the flow of Next App

• نحوه عملکرد مسیریابی در NextJS How Routing works in NextJS

• مسیریابی مبتنی بر فایل در NextJS File Based Routing in NextJS

• استفاده از فونت های مختلف در NextJS Using Different Fonts in NextJS

• ایجاد کامپوننت های قابل استفاده مجدد در NextJS Creating reusable Components in NextJS

• رندر سمت سرور در مقابل رندر سمت کلاینت Server side rendering VS Client side rendering

• استفاده از سرویس گیرنده در مقابل استفاده از سرور use client VS use server

توسعه پروژه با NextJS 14 و Bootstrap 5 Project Development with NextJS 14 & Bootstrap 5

• در حال توسعه Navbar - قسمت 1 Developing Navbar - Part-1

• در حال توسعه Navbar - قسمت 2 Developing Navbar - Part-2

• پیمایش نوار ناوبری با استفاده از تگ پیوند در NextJS Navbar Navigation using Link tag in NextJS

• Styling Hero Section - Part-1 Styling Hero Section - Part-1

• فایل css خاص صفحه و کاربرد آن Page specific css file and its usage

• استفاده از تصاویر در Next JS Using Images in Next JS

• طراحی بخش Footer Designing the Footer section

• استفاده از آیکون ها در Next JS Using Icons in Next JS

• انیمیشن ها در NextJS - Part-1 Animations in NextJS - Part-1

• انیمیشن ها در NextJS - Part-2 Animations in NextJS - Part-2

• کارت طراحی صفحه وبلاگ Blog Page designing Card

• صفحه وبلاگ برقراری تماس API سمت سرور Blog Page Make Server Side API call

• ارائه داده های API در مؤلفه کارت Rendering the API data on to the Card component

• نمایش تصویر سرور از راه دور در برنامه NextJS Displaying Remote Server Image in NextJS app

• سبک دادن به جزء کارت Styling the Card component

کش و قالب های مختلف در NextJS Caching and Different Templates in NextJS

• ذخیره داده ها در NextJS Caching data in NextJS

• بارگیری قالب در NextJS Loading Template in NextJS

• قالب Layout برای صفحات خاص در NextJS Layout Template for specific pages in NextJS

• الگوی خطا در NextJS Error Template in NextJS

مسیریابی پویا و انتقال داده ها بین کامپوننت ها در NextJS Dynamic Routing and Passing Data between Components in NextJS

• مسیریابی پویا و تودرتو در NextJS Dynamic and Nested Routing in NextJS

• مسیریابی پویا در صفحه جزئیات وبلاگ Dynamic Routing on the Blog Detail page

• انتقال داده بین صفحه در NextJS Passing data between page in NextJS

• واکشی اطلاعات جزئیات وبلاگ از سمت سرور API Fetching Blog Detail data from API server side

• یک ظاهر طراحی و نمایش داده ها در صفحه جزئیات وبلاگ Styling and Displaying data on Blog Detail page

• الگو در NextJS یافت نشد Not Found Template in NextJS

• حرکت از یک صفحه به صفحه دیگر از طریق جاوا اسکریپت Navigating from one page to another through Javascript

• انتقال داده از طریق پارامترهای پرس و جو Passing data through query params

مولفه های سمت کلاینت و سرور، با استفاده از هر دو با هم Client and Server side Components, Using both together

• زمان استفاده از اجزای سمت سرور و کلاینت When to Use Server and Client side components

• مثالی از استفاده از اجزای Client و Server با هم Example of Using Client and Server components together

• طراحی صفحه محصول Designing Product Page

• برقراری تماس API از مؤلفه مشتری Making API call From Client Component

• نمایش لیست محصولات در مؤلفه مشتری Displaying Product List on Client Component

• واکشی داده ها در بخش سرور و رندر سمت سرور Fetching data in Server Component and Rendering server side

• استفاده از مؤلفه مشتری و سرور با هم - قسمت 1 Using client and server component together - part-1

توسعه REST API در NEXT JS Developing REST API in NEXT JS

• آشنایی با عملکرد NextJS REST API Understanding the working of NextJS REST API

• ایجاد اپلیکیشن NextJS با Create Next App Creating the NextJS application with Create Next App

• بعدی JS Working و ساختار پوشه Next JS Working and Folder structure

• در حال توسعه اولین API REST ما Developing our First REST API

• دریافت API برای واکشی همه کاربران از میکروسرویس از راه دور GET API to fetch all Users from Remote microservice

• یکپارچه سازی Frontend و Backend REST API برای نمایش همه کاربران در صفحه واکشی شده Integrating Frontend and Backend REST API to show all Users on Page fetched

• POST API برای ایجاد کاربر جدید - Part-1 POST API to create new User - Part-1

• POST API برای ایجاد کاربر جدید با برقراری تماس میکروسرویس از راه دور - قسمت 2 POST API to create new User by making Remote microservice call - Part-2

• قرار دادن API ارسال پارامترهای پویا و درخواست PUT API passing dynamic params and request

• انجام اعتبارسنجی برای درخواست داده در API باطن Doing Validation for Request Data in backend API

• برای به روز رسانی یک کاربر با برقراری تماس میکروسرویس از راه دور، API را قرار دهید PUT API to update a User by making Remote microservice call

• DELETE API برای حذف کاربر با تماس میکروسرویس راه دور DELETE API to delete a user by calling remote microservice

• دریافت API برای واکشی جزئیات یک کاربر GET API to fetch Details of one user

استفاده از MongoDB و Mongoose با NextJS 14 Using MongoDB and Mongoose with NextJS 14

• MongoDB در مقابل MySQL و SQL در مقابل NoSQL و Mongoose MongoDB vs MySQL and SQL vs NoSQL and Mongoose

• ORM در مقابل ODM و نوشتن پرس و جو در قطب نما MongoDB ORM vs ODM and writing queries in MongoDB compass

• نصب mongoose و اتصال به mongodb از برنامه Installing mongoose and connecting to mongodb from application

• طرحواره مانگوس جدید برای مدل کاربر ایجاد کنید Create new mongoose schema for User model

• ذخیره کاربر در پایگاه داده Save user to database

کد منبع Source Code

• کد منبع Frontend Frontend Source Code

• کد منبع Backend Backend Source Code