دوره آموزشی
دوبله زبان فارسی
آموزش Next.js 15 و ری اکت - راهنمای کامل
✅ سرفصل و جزئیات آموزش
در این دوره شما صفر تا صد NextJS و نحوه ساخت اپلیکیشن های فول استک ReactJS و NextJS را با App Router یا Pages Router می آموزید.
آنچه یاد خواهید گرفت
- یاد می گیرید چگونه اپلیکیشن های فول است ری اکت را با NextJS 14 و App Router بسازید.
- ایجاد پروژه های واقعی و اعمال آموخته های خود با پروژه ها و مثال های عملی
- یادگیری روش های مختلف ساخت اپلیکیشن NextJS - بررسی App Router در مقابل Pages Router
- شروع کار با کامپوننت های سرور و کامپوننت های کلاینت ری اکت، واکشی داده و موارد دیگر
- مدیریت ارسال داده از طریق اکشن های سرور
- یادگیری همه ویژگی های کلیدی NextJS مانند پیش رندرینگ، SSR، واکشی داده، مسیریابی مبتنی بر فایل و احراز هویت
- اگر زمان محدودی دارید، دوره کامل یا ماژول «خلاصه NextJS» را برای شروع سریع بگذرانید.
پیش نیازهای دوره
- دانش ReactJS به شدت توصیه می شود، اما این دوره همچنین شامل یک ماژول کامل «بازبینی ری اکت» است.
- نیازی به دانش قبلی از NextJS نیست.
توضیحات دوره
بروزرسانی در دسامبر 2024:
یک بخش جدید بزرگ (از جمله یک پروژه دموی کاملاً جدید) اضافه شده که NextJS 15 و App Router را به طور عمیق پوشش می دهد.
- پوشش کامپوننت های سرور ری اکت، اکشن های سرور و موارد دیگر
- پوشش آپلود و ذخیره سازی فایل در S3
- بروزرسانی کامل بخش «بازبینی ری اکت»
هیچ دانش قبلی در NextJS نیاز نیست. در این دوره شما را با آنچه درباره App Router باید بدانید آشنا می کنیم.
به این دوره پرفروش NextJS بپیوندید و یاد بگیرید که چگونه با ری اکت و NextJS، اپلیکیشن های ری اکت بسیار پویا، فوق سریع و آماده سئو بسازید.
این دوره هر دو App Router و Pages Router در NextJS - دو رویکرد متفاوت برای ساخت اپلیکیشن های فول استک با ری اکت - را پوشش می دهد. شما یاد می گیرید که این دو رویکرد چیست، چرا دو رویکرد متفاوت وجود دارد و هر رویکرد چگونه کار می کند.
Next.js فریمورک آماده تولید و دارای قابلیت فول استک برای ReactJS است - محبوب ترین کتابخانه جاوا اسکریپت که این روزها می توانید یاد بگیرید.
در واقع، NextJS یک انتخاب عالی برای رشد به عنوان توسعه دهنده ری اکت و برای ارتقای اپلیکیشن های ری اکت شما به سطح بعدی است.
زیرا NextJS به سرعت در حال رشد است و بنابراین تقاضای زیادی دارد. و دلایل خوبی برای آن وجود دارد: NextJS به شما امکان می دهد اپلیکیشن های ری اکت را با رندرینگ داخلی سمت سرور و پیش رندرینگ صفحه بسازید. ایجاد تجربیات کاربری عالی و سازگار با موتورهای جستجو (سئو) برای اپلیکیشن های ری اکت هرگز آسان تر نبوده است.
علاوه بر این، NextJS ساخت اپلیکیشن های فول استک ری اکت (کدهای فرانت اند + بک اند ترکیب شده در یک پروژه) را بسیار آسان می کند. شما کد سمت کلاینت و سمت سرور را با هم ترکیب می کنید و یک API مبتنی بر نود جی اس همراه با اپلیکیشن های ری اکت خود بسازید.
آیا می خواهید احراز هویت را اضافه کنید؟ NextJS آن را نیز ساده می کند و ثبت نام کاربر، ورود به سیستم و مدیریت سشن را بسیار راحت می کند.
این دوره در کمترین زمان ممکن، شما را از سطح مبتدی به سطح پیشرفته NextJS می رساند.
ما از مبانی شروع می کنیم، هیچ دانش NextJS مورد نیاز نیست، زیرا به تمام ویژگی های اصلی که NextJS را تشکیل می دهند، می پردازیم. هم در تئوری و هم با چندین پروژه واقعی که در آن همه مفاهیم به صورت گام به گام اعمال خواهند شد.
برای این دوره، شما به دانش پایه ری اکت احتیاج خواهید داشت و در صورتی که خیلی وقت است با ری اکت سر و کار نداشته اید، می توانید با ماژول «بازبینی ری اکت»، یک مروری بر دانش خود داشته باشید.
به علاوه، این دوره شامل ماژول «خلاصه NextJS» است که به شما امکان می دهد همواره به دوره رجوع کنید و بدون نیاز به مشاهده کل دوره، دانش خود را رفرش کنید و یا فقط با استفاده از همین ماژول خلاصه می توانید در کمترین زمان ممکن با همه ویژگی های اصلی NextJS آشنا شوید.
با اتمام دوره قادر خواهید بود پروژه های NextJS شخصی خودتان را از ابتدا ایجاد کنید و برای پوزیشن های شغلی مرتبط با NextJS درخواست خود را ارائه کنید.
به طور مفصل، این دوره شامل موارد زیر می شود:
- NextJS چیست؟ و چرا از آن استفاده می کنید؟
- چرا تنها ری اکت (در بسیاری از موارد) کافی نیست؟
- ایجاد پروژه های NextJS از پایه و درک این پروژه ها
- کار با مسیریابی مبتنی بر فایل
- افزودن مسیرهای پویا و مسیرهای catch-all
- پیاده سازی فرم های مختلف پیش رندرینگ صفحه و رندرینگ سمت سرور
- کار با داده و افزودن واکشی داده + پیش واکشی داده به اپلیکیشن های خود
- مدیریت ارسال فرم ها با اکشن های سرور
- مدیریت آپلود فایل
- پیش تولید صفحات پویا و استاتیک
- افزودن بهینه سازی هایی مانند متادیتا به صفحات
- بهینه سازی تصاویر با کامپوننت تصویر در NextJS
- ساخت اپلیکیشن های فول استک با مسیرهای API و اکشن های سرور
- مدیریت state در سطح اپلیکیشن با React context (در اپلیکیشن های NextJS)
- افزودن احراز هویت به اپلیکیشن های NextJS
- چندین اپلیکیشن کامل که در آن همه مفاهیم اصلی اعمال می شود.
- ماژول کامل «بازبینی React.js» (به طوری که همه ما در یک موقعیت هستیم.)
- ماژول «خلاصه NextJS» به طوری که بتوانید مطالبی را که آموخته اید رفرش کنید یا فقط ویژگی های اصلی را به سرعت کشف کنید.
- و خیلی موارد دیگر
این دوره برای چه کسانی مناسب است؟
- توسعه دهندگان ری اکت که می خواهند به سطح بالاتر بروند و اپلیکیشن های ری اکت آماده تولید ایجاد کنند.
- توسعه دهندگان ری اکت که قصد ساخت اپلیکیشن های فول استک ری اکت را دارند.
- به طور کلی آن دسته از توسعه دهندگان وب که می خواهند با یکی از محبوب ترین و پرتقاضاترین استک های فناوری کار کنند.
آموزش Next.js 15 و ری اکت - راهنمای کامل
-
به این دوره خوش آمدید! 01:20
-
NextJS چیست؟ چرا از آن استفاده می کنید؟ 02:20
-
ویژگی های کلیدی و مزایای NextJS 02:40
-
ایجاد اولین اپلیکیشن NextJS 04:25
-
NextJS در مقابل "فقط ری اکت" - تحلیل پروژه NextJS 02:30
-
ویرایش اولین اپلیکیشن 02:21
-
Pages Router در مقابل App Router - یک فریمورک، دو رویکرد 02:29
-
چگونه می توان از این دوره بیشترین بهره را برد؟ 03:05
-
مقدمه ماژول 01:08
-
ری اکت چیست و چرا از آن استفاده می کنید؟ 05:37
-
پروژه های ری اکت - الزامات 02:09
-
ایجاد پروژه های ری اکت 03:27
-
پروژه شروع ما 03:28
-
درک نحوه عملکرد ری اکت 07:46
-
ساخت اولین کامپوننت سفارشی 11:15
-
خروجی گرفتن از مقادیر پویا 05:03
-
استفاده مجدد از کامپوننت ها 06:00
-
انتقال داده به کامپوننت ها با Props 06:15
-
استایل دهی CSS و ماژول های CSS 10:07
-
تمرین و کامپوننت دیگر 06:31
-
آماده سازی اپلیکیشن برای مدیریت State 03:45
-
افزودن Listener های رویداد 07:52
-
کار با State 10:00
-
ارتقای State 09:08
-
Prop ویژه فرزند 07:21
-
State و محتوای شرطی 08:59
-
افزودن هدر مشترک و مدیریت State بیشتر 07:51
-
افزودن دکمه های فرم 03:34
-
مدیریت ارسال فرم 06:18
-
بروزرسانی State بر اساس State قبلی 05:30
-
خروجی گرفتن از داده لیست 06:38
-
افزودن بک اند به React SPA 06:10
-
ارسال درخواست HTTP POST 04:12
-
مدیریت تاثیرات جانبی با ()useEffect 09:06
-
مدیریت State بارگذاری 04:23
-
درک و افزودن مسیریابی 03:55
-
افزودن مسیرها 05:36
-
کار با مسیرهای طرح بندی 04:08
-
ریفکتور کردن کامپوننت های مسیر و تودرتوسازی بیشتر 05:35
-
لینک دهی و ناوبری 08:09
-
واکشی داده از طریق loader()s 09:07
-
ارسال داده با action()s 11:07
-
مسیرهای پویا 08:41
-
خلاصه ماژول 01:25
-
مقدمه ماژول 01:27
-
ReactJS چیست؟ 03:48
-
چرا از ReactJS استفاده کنیم؟ - اولین دمو 07:25
-
ساخت اپلیکیشن های تک صفحه ای (SPA) 02:00
-
جایگزین های ری اکت 03:06
-
ایجاد پروژه جدید ری اکت 08:15
-
راه اندازی ویرایشگر کد 03:04
-
بررسی عمیق پروژه ایجاد شده 06:31
-
ری اکت چگونه کار می کند؟ درک کامپوننت ها 07:36
-
کار با کامپوننت ها و استایل دهی با کلاس های CSS 05:34
-
ساخت و استفاده مجدد از کامپوننت ها 07:19
-
انتقال داده با Props و محتوای پویا 05:17
-
مدیریت رویدادها 06:40
-
افزودن کامپوننت های بیشتر 05:40
-
معرفی State 08:18
-
کار با Props رویداد 07:07
-
افزودن مسیریابی 16:52
-
افزودن لینک ها و ناوبری 05:20
-
محدوده بندی استایل های کامپوننت با ماژول های CSS 05:45
-
خروجی گرفتن از لیست های داده و کامپوننت ها 05:49
-
افزودن کامپوننت های بیشتر 09:47
-
ایجاد کامپوننت های "wrapper" 08:39
-
کار با فرم ها 08:58
-
دریافت ورودی کاربر و مدیریت ارسال فرم 09:45
-
آماده سازی اپلیکیشن برای درخواست های HTTP و افزودن بک اند 06:51
-
ارسال درخواست POST Http 05:18
-
ناوبری برنامه ای 03:42
-
شروع کار با واکشی داده 09:25
-
استفاده از هوک "useEffect" 10:07
-
معرفی React Context 11:02
-
بروزرسانی State بر اساس State قبلی 05:54
-
استفاده از کانتکس در کامپوننت ها 12:10
-
کاربردهای بیشتر کانتکس 06:54
-
خلاصه ماژول 01:00
-
مقدمه ماژول 01:20
-
شروع راه اندازی 02:32
-
درک مسیریابی مبتنی بر فایل و کامپوننت های سرور ری اکت 02:45
-
افزودن مسیر دیگری از طریق فایل سیستم 03:06
-
ناوبری بین صفحات - راه حل اشتباه و درست 04:12
-
کار با صفحات و طرح بندی ها 03:22
-
نام فایل های رزرو شده، کامپوننت های سفارشی و نحوه سازماندهی پروژه NextJS 06:31
-
پیکربندی مسیرهای پویا و استفاده از پارامترهای مسیر 06:17
-
به سمت پروژه اصلی - اپلیکیشن Foodies 01:24
-
تمرین - تسک خود 02:03
-
تمرین - راه حل 08:19
-
بازبینی مفهوم طرح بندی ها 03:50
-
افزودن کامپوننت سفارشی به یک طرح بندی 05:58
-
استایل دهی پروژه NextJS - گزینه های شما و استفاده از ماژول های CSS 06:00
-
بهینه سازی تصاویر با کامپوننت تصویر در NextJS 04:57
-
استفاده از دیگر کامپوننت های سفارشی 03:48
-
Populate کردن محتوای صفحه شروع 04:18
-
آماده سازی Slideshow تصویر 03:25
-
کامپوننت های سرور در مقابل کامپوننت های کلاینت ری اکت - چه زمانی از چه چیزی استفاده کنیم؟ 08:15
-
استفاده کارآمد از کامپوننت های کلاینت 11:07
-
خروجی گرفتن از داده و تصاویر وعده های غذایی با ابعاد نامشخص 10:31
-
راه اندازی پایگاه داده SQLite 03:11
-
واکشی داده با استفاده از NextJS و قابلیت های فول استک 07:17
-
افزودن صفحه بارگذاری 04:00
-
استفاده از پاسخ های تعلیق و استریم شده برای مدیریت State بارگذاری دانه ای 05:54
-
مدیریت خطاها 05:22
-
مدیریت State های Not Found 01:57
-
بارگذاری و رندرینگ جزئیات وعده غذایی از طریق مسیرهای پویا و پارامترهای مسیر 11:03
-
Throw کردن خطاهای Not Found برای وعده های غذایی جداگانه 02:03
-
شروع کار با فرم "غذاهای مشترک" 01:53
-
شروع کار با کامپوننت ورودی انتخابگر تصویر سفارشی 08:28
-
افزودن پیش نمایش تصویر به انتخابگر 05:59
-
معرفی و استفاده از اکشن های سرور برای مدیریت فرم های ارسالی 09:02
-
ذخیره اکشن های سرور در فایل های جداگانه 03:45
-
ایجاد یک Slug و سالم سازی ورودی کاربر برای محافظت XSS 03:20
-
ذخیره تصاویر آپلود شده و ذخیره داده در پایگاه داده 12:56
-
مدیریت Status ارسال فرم با useFormStatus 05:30
-
افزودن اعتبارسنجی ورودی سمت سرور 05:54
-
کار با پاسخ های اکشن سرور و useFormState 08:05
-
ساخت برای تولید و آشنایی با کش کردن NextJS 06:06
-
تریگر کردن اعتبارسنجی های مجدد کش 03:57
-
فایل ها را به صورت محلی در فایل سیستم ذخیره نکنید 02:13
-
افزودن متادیتای استاتیک 03:47
-
افزودن متادیتای پویا 02:20
-
خلاصه ماژول 04:25
-
مقدمه ماژول 01:37
-
راه اندازی پروژه، بررسی و تمرین 04:17
-
راه حل تمرین - بخش 1 07:17
-
راه حل تمرین - بخش 2 04:56
-
استایل دهی اپلیکیشن و استفاده از داده ساختگی 08:59
-
مدیریت خطاهای "Not Found" و نمایش صفحات "Not Found" 04:39
-
راه اندازی و استفاده از مسیرهای موازی 06:40
-
کار با مسیرهای موازی و مسیرهای تودرتو 12:50
-
پیکربندی مسیرهای Catch-All 06:01
-
مسیرهای Catch-All Fallback و برخورد با سگمنت های مسیر چندگانه 09:21
-
throw کردن خطاها (مرتبط با مسیر) 03:38
-
مدیریت خطاها با صفحات خطا 03:02
-
کامپوننت های سرور در مقابل کلاینت 10:10
-
مسیرهای تودرتو در مسیرهای پویا 04:56
-
رهگیری ناوبری و استفاده از مسیرهای رهگیری 05:11
-
ترکیب مسیرهای موازی و رهگیری مسیرها 07:42
-
ناوبری برنامه ای 02:42
-
استفاده و درک گروه های مسیر 06:39
-
ساخت APIs با هندلرهای مسیر 05:15
-
استفاده از میان افزار 05:40
-
خلاصه ماژول 00:30
-
مقدمه ماژول 00:56
-
افزودن یک بک اند 02:46
-
گزینه 1 - واکشی داده سمت کلاینت 08:50
-
گزینه 2 - واکشی داده سمت سرور 05:36
-
چرا از یک بک اند جداگانه استفاده کنیم؟ - واکشی مستقیم از منبع 06:14
-
نمایش Fallback "بارگذاری" 04:50
-
مهاجرت یک اپلیکیشن کامل به منبع داده محلی (پایگاه داده) 13:19
-
واکشی داده دانه ای با تعلیق 11:35
-
مقدمه ماژول 01:11
-
شروع پروژه و تحلیل گزینه های جهش 05:46
-
راه اندازی اکشن فرم 09:19
-
ایجاد اکشن سرور 04:16
-
ذخیره داده در پایگاه داده ها 04:39
-
ارائه بازخورد کاربر با استفاده از هوک useFormStatus 06:04
-
اعتبارسنجی ورودی کاربر با کمک هوک UseFormState 09:57
-
تنظیم اکشن های سرور برای useFormState 07:40
-
ذخیره اکشن های سرور در فایل های جداگانه 03:57
-
آپلود و ذخیره تصاویر 08:13
-
روش های جایگزین استفاده، پیکربندی و تریگر کردن اکشن های سرور 11:00
-
اعتبارسنجی مجدد داده برای اجتناب از مشکلات کش کردن 04:45
-
انجام بروزرسانی های خوش بینانه با NextJS 11:42
-
تفاوت های کش - توسعه در مقابل تولید 06:13
-
مقدمه ماژول 01:09
-
درک انواع کش کردن در NextJS 06:39
-
راه اندازی پروژه 01:45
-
مدیریت Memoization درخواست 05:31
-
آشنایی با تنظیمات کش و کش داده 07:31
-
کنترل کش داده 05:27
-
درک کش مسیر کامل 04:42
-
عدم اعتبارسنجی کش درخواستی با revalidatePath و revalidateTag 06:03
-
راه اندازی Memoization درخواست برای منابع داده سفارشی 07:15
-
راه اندازی کش داده برای منابع داده سفارشی 03:44
-
عدم اعتبارسنجی داده برای منبع داده سفارشی 03:32
-
خلاصه ماژول 01:44
-
مقدمه ماژول 03:08
-
استفاده از کامپوننت تصویر NextJS 03:43
-
درک کامپوننت تصویر NextJS 05:15
-
کنترل اندازه تصویر 04:44
-
کار با تصاویر اولویت دار و تنظیمات بیشتر 03:02
-
بارگذاری تصاویر ناشناس 04:12
-
پیکربندی CSS برای تصاویر با fill" Prop" 03:03
-
استفاده از بارگذار تصویر و تغییر اندازه Cloudinary 15:51
-
متادیتای صفحه - مقدمه 01:04
-
پیکربندی متادیتای صفحه استاتیک 02:57
-
پیکربندی متادیتای صفحه پویا 05:03
-
آشنایی با متادیتای طرح بندی 01:38
-
مقدمه ماژول 01:04
-
راه اندازی پروژه 03:26
-
ثبت نام کاربر - استخراج و اعتبارسنجی ورودی کاربر 14:35
-
ذخیره کاربران در پایگاه داده - روش اشتباه 04:30
-
هش کردن پسوردها و ذخیره داده کاربر به روش صحیح 02:07
-
چک کردن برای داپلیکیشن ایمیل 05:01
-
تئوری - احراز هویت کاربر چگونه کار می کند؟ 05:21
-
انتخاب پکیج احراز هویت شخص ثالث (Lucia) 02:54
-
ایجاد نمونه جدید احراز هویت Lucia 04:31
-
پیکربندی سشن و کوکی سشن 06:11
-
راه اندازی سشن احراز هویت 03:43
-
اعتبارسنجی سشن احراز هویت فعال 07:15
-
محافظت از مسیرها در برابر دسترسی غیرمجاز 03:07
-
سوئیچینگ حالت های احراز هویت با پارامترهای کوئری ( پارامترهای جستجو) 05:35
-
افزودن لاگین کاربر (از طریق اکشن سرور) 05:34
-
تریگر کردن اکشن های مختلف سرور از طریق پارامترهای کوئری 03:44
-
افزودن طرح بندی Auth-only 03:41
-
افزودن خروج کاربر از سیستم 04:10
-
جمع بندی دوره 01:49
-
اما محتوای NextJS بیشتری وجود دارد 03:10
-
از App Router تا Pages Router 01:40
-
مقدمه ماژول 01:12
-
شروع راه اندازی 01:19
-
مسیریابی مبتنی بر فایل چیست؟ و چرا مؤثر است؟ 05:22
-
افزودن اولین صفحه 04:01
-
افزودن فایل نام گذاری شده یا فایل مسیر استاتیک 01:34
-
کار با مسیرهای تودرتو 03:33
-
افزودن مسیرهای پویا 04:54
-
استخراج داده سگمنت مسیر پویا (مسیرهای پویا) 04:54
-
ساخت مسیرهای پویای تودرتو 07:12
-
افزودن مسیرهای Catch-All 05:44
-
ناوبری با کامپوننت "لینک" 05:44
-
ناوبری به مسیرهای پویا 03:41
-
یک روش متفاوت در تنظیم Hrefs لینک 02:55
-
ناوبری برنامه ای 03:50
-
افزودن صفحه 404 سفارشی 01:35
-
خلاصه ماژول 05:51
-
مقدمه ماژول 02:04
-
برنامه ریزی پروژه 04:15
-
راه اندازی صفحات اصلی 07:35
-
افزودن داده ساختگی و فایل های استاتیک 04:46
-
افزودن کامپوننت های عادی ری اکت 07:14
-
افزودن دیگر کامپوننت های ری اکت و اتصال کامپوننت ها 10:22
-
استایل دهی کامپوننت ها در پروژه های NextJS 09:28
-
افزودن دکمه ها و آیکون ها 08:25
-
افزودن صفحه "جزئیات رویداد" (مسیر پویا) 08:31
-
افزودن کامپوننت Wrapper طرح بندی کلی 06:27
-
کار روی صفحه "همه رویدادها" 02:05
-
افزودن فرم فیلتر برای فیلترینگ رویدادها 08:25
-
ناوبری برنامه ای به صفحه "رویدادهای فیلتر شده" 08:25
-
استخراج داده روی صفحه Catch-All 08:54
-
گام های پایانی 07:02
-
خلاصه ماژول 01:40
-
مقدمه ماژول 02:25
-
مشکل اپلیکیشن های قدیمی ری اکت (و واکشی داده) 05:15
-
چگونه پیش رندر صفحات را در NextJS آماده سازی کنیم؟ 05:38
-
معرفی تولید استاتیک با "getStaticProps" 04:04
-
پیش رندر NextJS به صورت پیش فرض 03:08
-
افزودن "getStaticProps" به صفحات 06:39
-
اجرای کد سمت سرور و استفاده از فایل سیستم 07:41
-
نگاهی به پشت صحنه 05:20
-
استفاده از Iتولید استاتیک افزایشی (ISR) 07:22
-
نگاهی به پشت صحنه ISR 03:45
-
بررسی دقیق "getStaticProps" و گزینه های پیکربندی 04:19
-
کار با پارامترهای پویا 09:46
-
معرفی "getStaticPaths" برای صفحات پویا 03:43
-
استفاده از "getStaticPaths" 03:26
-
"getStaticPaths" و پیش واکشی لینک - نگاهی به پشت صحنه 03:59
-
کار با صفحات Fallback 05:27
-
بارگذاری مسیرها به صورت پویا 04:02
-
صفحات Fallback و صفحات "Not Found" 05:53
-
معرفی "getServerSideProps" برای رندرینگ سمت سرور (SSR) 04:13
-
استفاده از "getServerSideProps" برای رندرینگ سمت سرور 04:05
-
"getServerSideProps" و کانتکس آن 04:20
-
صفحات پویا و "getServerSideProps" 04:04
-
"getServerSideProps" - نگاهی به پشت صحنه 03:25
-
معرفی واکشی داده سمت کلاینت (و زمان استفاده از آن) 03:40
-
پیاده سازی واکشی داده سمت کلاینت 14:47
-
استفاده از هوک "useSWR" در NextJS 08:58
-
ترکیب پیش واکشی با واکشی سمت کلاینت 08:55
-
خلاصه ماژول 06:45
-
مقدمه ماژول 01:04
-
آماده سازی ها 05:01
-
افزودن تولید سایت استاتیک (SSG) به صفحه اصلی 11:02
-
بارگذاری مسیرها و داده برای صفحات پویا 09:50
-
بهینه سازی واکشی داده 07:47
-
کار روی صفحه "همه رویدادها" 02:47
-
استفاده از رندرینگ سمت سرور (SSR) 09:52
-
افزودن واکشی داده سمت کلاینت 10:55
-
خلاصه ماژول 01:30
-
مقدمه ماژول 01:19
-
تحلیل نیاز به متادیتای "head" 01:49
-
پیکربندی محتوای "head" 03:41
-
افزودن محتوای پویای "head" 05:17
-
استفاده مجدد از منطق در یک کامپوننت 04:22
-
کار با فایل "app.js_" (و دلیل آن) 03:03
-
ادغام محتوای "head" 03:17
-
فایل "document.js_" (و کاری که انجام می دهد) 05:31
-
بررسی دقیق تصاویر 01:59
-
بهینه سازی تصاویر با کامپوننت و ویژگی "تصویر بعدی" 08:37
-
نگاهی بر مستندات "تصویر بعدی" 00:51
-
خلاصه ماژول 01:16
-
مقدمه ماژول 00:50
-
"مسیرهای API" چیست؟ 05:37
-
نوشتن اولین مسیر API 08:24
-
آماده سازی فرم فرانت اند 06:29
-
تجزیه درخواست ورودی و اجرای کد سمت سرور 10:16
-
ارسال درخواست ها به مسیرهای API 05:43
-
استفاده از مسیرهای API برای دریافت داده 07:56
-
استفاده از مسیرهای API برای پیش رندرینگ صفحات 08:04
-
ایجاد و استفاده از مسیرهای API پویا 13:41
-
بررسی روش های مختلف ساختاردهی فایل های مسیر API 05:09
-
خلاصه ماژول 01:44
-
مقدمه ماژول 01:31
-
شروع راه اندازی و یک چالش برای شما 05:15
-
افزودن مسیر "Newsletter" 11:10
-
افزودن مسیرهای API کامنت ها 08:43
-
اتصال فرانت اند به مسیرهای API کامنت ها 10:59
-
راه اندازی پایگاه داده MongoDB 05:42
-
اجرای کوئری های MongoDB از داخل مسیرهای API 09:14
-
درج کامنت ها در پایگاه داده 06:26
-
دریافت داده از پایگاه داده 04:31
-
افزودن مدیریت خطا 07:33
-
مدیریت خطای بیشتر 10:47
-
خلاصه ماژول 01:45
-
مقدمه ماژول 01:27
-
State هدف و راه اندازی پروژه 04:32
-
ایجاد React Context جدید 05:37
-
افزودن State کانتکس 03:49
-
استفاده از داده کانتکس در کامپوننت ها 04:37
-
مثال - تریگر کردن و نمایش نوتیفیکیشن ها 06:35
-
مثال - حذف خودکار نوتیفیکیشن ها 06:31
-
راه حل چالش 07:22
-
خلاصه ماژول 01:09
-
مقدمه ماژول 02:59
-
راه اندازی صفحات اصلی 05:10
-
شروع کار با صفحه اصلی 05:29
-
افزودن کامپوننت "Hero" 08:47
-
افزودن طرح بندی و ناوبری 08:45
-
زمان افزودن استایل دهی و لوگو 03:18
-
شروع کار روی بخش "پست های ویژه" 05:47
-
افزودن گرید پست و آیتم های پست 09:40
-
رندرینگ داده ساختگی پست 12:25
-
افزودن صفحه "همه پست ها" 03:59
-
کار روی صفحه "جزئیات پست" 10:10
-
رندرینگ Markdown به عنوان JSX 02:30
-
افزودن فایل های Markdown به عنوان منبع داده 07:32
-
افزودن توابع برای خواندن و واکشی داده از فایل های Markdown 13:40
-
استفاده از داده Markdown برای رندرینگ پست ها 08:19
-
رندرینگ مسیرها و صفحات پست پویا 11:42
-
رندرینگ تصاویر با کامپوننت "تصویر بعدی" (از Markdown) 12:46
-
رندرینگ اسنیپت های کد از Markdown 06:29
-
آماده سازی فرم تماس با ما 04:18
-
افزودن مسیر API تماس با ما 04:26
-
ارسال داده از کلاینت به مسیر API 07:26
-
ذخیره پیام ها با MongoDB در یک پایگاه داده 08:52
-
افزودن بازخورد رابط کاربری با نوتیفیکیشن ها 15:05
-
افزودن داده "head" 06:52
-
افزودن فایل "document.js_" 02:55
-
استفاده از پورتال های ری اکت 03:45
-
خلاصه ماژول 01:24
-
مقدمه ماژول 01:17
-
ساخت اپلیکیشن های NextJS - گزینه های شما 08:05
-
مراحل کلیدی استقرار 03:06
-
چک کردن و بهینه سازی کد 03:11
-
فایل پیکربندی NextJS و کار با متغیرهای محیطی 14:25
-
اجرای بیلد تست و کاهش اندازه کد 07:21
-
مثالی از یک استقرار کامل (در Vercel) 17:40
-
نکته ای درباره گیت هاب و اعتبارات مخفی 01:57
-
استفاده از ویژگی "اکسپورت" 02:16
-
خلاصه ماژول 00:38
-
مقدمه ماژول 01:16
-
پروژه شروع ما 01:45
-
احراز هویت چگونه کار می کند؟ (در اپلیکیشن های ری اکت و NextJS) 14:23
-
استفاده از کتابخانه "next-auth" 03:04
-
افزودن مسیر API ثبت نام کاربر 12:59
-
ارسال درخواست های ثبت نام از فرانت اند 09:41
-
بهبود ثبت نام با آدرس های ایمیل منحصر به فرد 03:00
-
افزودن "Credentials Auth Provider" و منطق لاگین کاربر 14:08
-
ارسال درخواست ورود به سیستم از فرانت اند 06:52
-
مدیریت سشن فعال (روی فرانت اند) 05:57
-
افزودن خروج کاربر از سیستم 02:18
-
افزودن محافظ های صفحه سمت کلاینت (حفاظت از مسیر) 07:50
-
افزودن محافظ های صفحه سمت سرور (چه زمانی از کدام رویکرد استفاده کنیم؟) 07:41
-
محافظت از صفحه "احراز هویت" 05:46
-
استفاده از کامپوننت ارائه دهنده سشن next-auth 05:14
-
تحلیل الزامات بیشتر در احراز هویت 03:42
-
محافظت از مسیرهای API 06:37
-
افزودن منطق "تغییر پسورد" 10:36
-
ارسال درخواست "تغییر پسورد" از فرانت اند 09:16
-
خلاصه ماژول و گام های پایانی 03:29
-
مقدمه ماژول 03:03
-
NextJS چیست؟ 04:45
-
ویژگی کلیدی - پیش رندرینگ سمت سرور صفحات 06:38
-
ویژگی کلیدی - مسیریابی مبتنی بر فایل 03:13
-
ویژگی کلیدی - ساخت آسان اپلیکیشن های فول استک 01:50
-
ایجاد پروژه NextJS و راه اندازی محیط توسعه یکپارچه (IDE) 06:14
-
درباره "App Router" 02:47
-
تحلیل پروژه ایجاد شده 02:52
-
افزودن اولین صفحات به پروژه 06:05
-
افزودن مسیرها و صفحات تودرتو 03:47
-
ایجاد صفحات پویا 03:36
-
استخراج داده مسیر پویا 04:07
-
لینک دهی بین صفحات 07:13
-
پیش به سوی یک پروژه بزرگتر 03:32
-
آماده سازی صفحات پروژه 03:42
-
رندرینگ یک لیست از Meetup های ساختگی 05:03
-
افزودن فرم برای افزودن Meetups 03:54
-
فایل "app.js_" و کامپوننت های wrapper 06:17
-
ناوبری برنامه ای 03:47
-
افزودن کامپوننت های سفارشی و استایل دهی با ماژول های CSS 10:00
-
پیش رندرینگ صفحه در NextJS چگونه عمل می کند؟ 05:52
-
معرفی واکشی داده برای تولید صفحه (getStaticProps) 08:56
-
تولید سایت استاتیک (SSG) با getStaticProps 05:44
-
بررسی getServerSideProps 06:27
-
کار با پارامترهای مسیر پویا در getStaticProps 05:14
-
صفحات پویا، getStaticProps و getStaticPaths 07:16
-
معرفی مسیرهای API 06:20
-
اتصال و کوئری پایگاه داده MongoDB 09:32
-
ارسال درخواست های HTTP به مسیرهای API 06:49
-
دریافت داده از پایگاه داده (برای پیش رندرینگ صفحه) 07:09
-
دریافت مسیرها و داده جزئیات Meetup 09:41
-
افزودن متادیتای "Head" به صفحات 09:19
-
استقرار پروژه های NextJS 12:26
-
کار با صفحات Fallback و استقرار مجدد 04:13
-
خلاصه ماژول 02:11
-
جمع بندی دوره 00:55
مشخصات آموزش
آموزش Next.js 15 و ری اکت - راهنمای کامل
- تاریخ به روز رسانی: 1404/06/14
- سطح دوره:همه سطوح
- تعداد درس:417
- مدت زمان :40:20:20
- حجم :11.33GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
The Great Courses
2,495,000
499,000 تومان
- زمان: 06:19:16
- تعداد درس: 40
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
6,787,000
1,357,400 تومان
- زمان: 17:11:52
- تعداد درس: 113
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
8,360,500
1,672,100 تومان
- زمان: 21:10:47
- تعداد درس: 202
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
5,720,500
1,144,100 تومان
- زمان: 14:29:26
- تعداد درس: 36
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,206,500
841,300 تومان
- زمان: 10:39:08
- تعداد درس: 64
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,391,000
878,200 تومان
- زمان: 11:07:45
- تعداد درس: 63
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
7,261,000
1,452,200 تومان
- زمان: 18:23:18
- تعداد درس: 103
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:57:00
- تعداد درس: 20
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:41:00
- تعداد درس: 9
-
سطح دوره:
-
زبان: دوبله فارسی