دوره آموزشی
آموزش های یودمی
دوبله زبان فارسی

تسلط به Next.js 14 - راهنمای کامل فول‌استک

تسلط به Next.js 14 - راهنمای کامل فول‌استک

✅ سرفصل و جزئیات آموزش

آنچه یاد خواهید گرفت:

  • Next 14 از پایه
  • ساخت پروژه‌های فول‌استک
  • استقرار پروژه‌ها به‌صورت لایو
  • ساخت وبسایت‌ها با Next
  • ساخت وب اپلیکیشن‌ها با Next

پیش‌نیازهای دوره

  • مهارت‌های اولیه وب

توضیحات دوره

ما این دوره‌ Next.js 14 را طراحی کرده‌ایم زیرا می‌دانیم شما به دنبال چیزی متفاوت هستید. شاید شما به دنبال یک شغل ثابت هستید یا رویای ایجاد اپلیکیشن‌های خود را در سر دارید، اما در هر صورت از صفر شروع می‌کنید. نگران جاوا اسکریپت یا ری‌اکت نباشید؛ ما به شما منابع جالبی معرفی می‌کنیم تا به سرعت راه بیفتید.

پروژه‌هایی که به آنها خواهید پرداخت:

  • سایت پورتفولیو و بلاگ برای نمایش توانایی‌های خود
  • اپلیکیشن مالی شخصی برای سازماندهی امور مالی خود

آنچه یاد خواهید گرفت:

فریمورک NextJS با طراحی رابط کاربری، ردیابی داده‌، اطمینان از اینکه کاربران آنچه می‌گویند هستند (و دور نگه‌داشتن افراد بد)، و زیبا نشان دادن همه‌ چیز با Tailwind CSS یک پکیج کامل است. همچنین ما همه‌ موارد را آنلاین و در دسترس جهان قرار می‌دهیم.

بعد از این دوره:

شما تبدیل به نوعی توسعه‌دهنده‌ فول‌استک خواهید شد که همه می‌خواهند او را استخدام کنند. شما مهارت‌هایی خواهید داشت که معمولاً بیش از یک سال طول می‌کشد تا یاد بگیرید و خواهید دانست که چگونه یک ایده را از ابتدا تا انتها عملی کنید. مطمئن هستیم که NextJS را دوست خواهید داشت و از ساخت اپلیکیشن‌ها با این فریمورک لذت خواهید برد.

این دوره برای چه کسانی مناسب است؟

  • کسی که به دنبال شغل فناوری با استفاده از فناوری‌های روز مانند Next است.
  • کسی که مهارت‌های اولیه وب را دارد و می‌خواهد وبسایت‌ها یا وب اپلیکیشن‌های کامل بسازد.

تسلط به Next.js 14 - راهنمای کامل فول‌استک

  • به دوره خوش آمدید 00:30
  • Next.js چیست و چگونه به اینجا رسیدیم؟ 09:10
  • آنچه خواهید آموخت، آنچه خواهید ساخت و راه‌اندازی 07:13
  • مقدمه بخش - ایجاد پروژه Next.js و بررسی 00:26
  • ایجاد پروژه Next.js 07:56
  • ساختار پروژه Next.js 09:00
  • مقدمه بخش - آشنایی با گیت و گیت‌هاب 00:40
  • آشنایی با گیت 06:21
  • نصب گیت روی مک 01:52
  • نصب گیت روی ویندوز 02:32
  • نصب گیت روی لینوکس 00:48
  • کامیت کردن تغییرات در گیت 05:54
  • گیت‌هاب، مخزن از راه دور و پوش کردن تغییرات 09:47
  • مقدمه بخش - ری‌اکت 00:41
  • ری‌اکت چیست؟ 05:12
  • درک سینتکس JSX 08:08
  • کامپوننت‌ها به عنوان بلوک‌های سازنده رابط کاربری اولیه 05:47
  • Props کامپوننت (ارسال داده به کامپوننت‌ها) 04:13
  • پاسخ به رویدادها 05:39
  • حفظ State کامپوننت با استفاده از هوک‌ها (useState) 07:57
  • رندرینگ شرطی 04:37
  • رندرینگ لیست عناصر 05:57
  • ایمپورت و اکسپورت کامپوننت‌ها 03:45
  • مقدمه بخش - مسیر‌یابی، صفحات و طرح‌بندی‌ها 00:34
  • مسیر‌یابی فایل سیستم و ایجاد صفحات 06:53
  • طرح‌بندی‌ها (رابط کاربری مشترک بین صفحات) 05:25
  • لینک‌ها و ناوبری 09:32
  • درک پیش‌ واکشی و کش‌ کردن 09:36
  • مسیرهای پویا با پارامترها 05:15
  • واکشی داده‌ چگونه در Next.js عمل می‌کند؟ (توضیحات و توصیه‌ها) 06:38
  • اجرای سرور جی سان ماک 08:25
  • واکشی داده با واکشی در داخل کامپوننت سرور 07:54
  • درک کش داده‌ و Memoization درخواست 06:06
  • واکشی کش در عمل 06:47
  • چگونه یک منبع داده کند می‌تواند کل صفحه شما را بلاک کند؟ 03:21
  • رابط کاربری بارگذاری و استریمینگ 09:46
  • رابط کاربری بارگذاری و React Suspense 03:34
  • چه زمانی از React Suspense استفاده کنیم؟ هنگام رابط کاربری بارگذاری؟ تفاوت ها؟ 06:10
  • درباره‌ استریمینگ و SSR 02:16
  • گزینه‌های استایل‌دهی در Next.js 05:18
  • شروع کار با Tailwind CSS 09:48
  • کانتینر Flex و طراحی واکنش‌گرا 08:54
  • افزودن ماژول CSS و استفاده از Tailwind درون آن 04:46
  • موقعیت‌یابی عناصر با Flex 06:12
  • استفاده از گرید و ساخت کامپوننت‌های قابل سفارشی 09:27
  • مدیریت خطا در صفحات 06:54
  • مرزهای خطا 05:07
  • سلسله‌مراتب خطا - خطا کجا ضبط می‌شود؟ 05:06
  • طرح‌بندی‌های تودرتو 05:01
  • مدیریت خطا در طرح‌بندی‌ها و در طرح‌بندی‌ ریشه 06:22
  • بازیابی از خطاها 04:44
  • صفحه Not Found (404) سفارشی 08:51
  • مشکلات مربوط به تصاویر 10:01
  • ویتال‌های اصلی وب، LCP ،CLS و بهینه‌سازی تصاویر 07:13
  • افزودن گالری تصاویر (هنوز بهینه‌سازی نشده) 09:23
  • استفاده از کامپوننت <Image> در Next برای بهینه‌سازی خودکار 06:56
  • اندازه تصویر واکنش‌گرا 07:17
  • اندازه‌گیری صفحه با Lighthouse 03:10
  • بهینه‌سازی فونت‌ها با Next.js (فونت‌های گوگل و فونت‌های محلی) 05:20
  • بهینه‌سازی اسکریپت‌ها (اتصال به سرویس‌های خارجی مانند Analytics و چت‌بات‌ها) 09:21
  • آشنایی با متادیتا 03:24
  • بررسی Attribute های متادیتا 06:40
  • متادیتای استاتیک 04:27
  • متادیتای پویا 05:12
  • تولید تصاویر پویا (OpenGraph) 12:26
  • راه‌اندازی علامت‌گذاری و MDX و اولین صفحه MDX 07:45
  • استایل‌دهی MDX - تایپوگرافی Tailwind 05:21
  • MDX از راه دور (رندرینگ هر علامت‌گذاری) 05:01
  • بارگذاری MDX از فایل‌ها (پست‌های وبلاگ) 03:46
  • متادیتا شماره 1 - Frontmatter چیست؟ و زمان ریفکتور 06:20
  • متادیتا شماره 2 - استخراج Frontmatter و محتوا، زمان ریفکتور 09:37
  • لیست پست‌ وبلاگ - واکشی متادیتای همه فایل‌ها 11:27
  • لیست پست‌ وبلاگ - لینک‌ها 08:39
  • بهبودهای عملکرد و ریفکتور کردن - استفاده از کش برای Memoization 10:43
  • تگ‌ها و فیلترینگ با استفاده از پارامترهای جستجوی کوئری 09:02
  • مرتب‌سازی پست‌ها - استفاده از پارامترهای کوئری برای State - شماره 1 09:25
  • تغییر ترتیب مرتب‌سازی - استفاده از پارامترهای کوئری برای State - شماره 2 06:01
  • افزودن صفحه‌بندی - استفاده از پارامترهای کوئری برای State - شماره 3 05:32
  • کامپوننت صفحه‌بندی - صفحات 08:59
  • کامپوننت صفحه‌بندی - لینک‌ها 11:24
  • سفارشی‌سازی HTML تولید شده از علامت‌گذاری 06:47
  • تگ‌ها در پست وبلاگ 05:03
  • تاگل کردن Dark Mode - کامپوننت 07:17
  • تاگل کردن Dark Mode - هوک سفارشی، تنظیم Dark Mode و Light Mode 08:46
  • تاگل کردن Dark Mode - استفاده از کوکی‌ها در Next 10:01
  • نکته‌ای درباره‌ کوکی‌ها در کامپوننت‌های سرور و رندرینگ پویا 05:09
  • جمع‌بندی پروژه - صفحه اصلی 12:57
  • توابع پویا که رندرهای صفحه پویا را اجباری می‌کنند 05:43
  • استفاده از ()generateStaticParams برای پیش‌رندر صفحات 05:13
  • SearchParams و پیش‌رندرینگ استاتیک؟ 08:46
  • ایجاد حساب Vercel و استقرار لایو 06:38
  • پرداختن به پایگاه متادیتا و گفتگو درباره‌ ران‌تایم‌های Edge در مقابل Node 05:22
  • ایجاد پروژه و زمین بازی 10:42
  • کامپوننت هدر 07:00
  • کامپوننت روند مالی 11:31
  • کامپوننت روند مالی - پول بیشتر یا کمتر؟ 09:55
  • هوک فرمت‌بندی ارز 04:22
  • کامپوننت آیتم تراکنش 15:09
  • کامپوننت خلاصه تراکنش 06:03
  • ایجاد دکمه‌ها 10:58
  • استایل‌دهی به ورودی‌های فرم 09:52
  • کامپوننت‌های ورودی فرم ری‌اکت سفارشی 11:01
  • افزودن تاگل Light Mode و Dark Mode 11:49
  • افزودن سرور جی سان به عنوان منبع داده موقت 06:01
  • نمایش لیست تراکنش‌ها 09:03
  • گروه‌بندی تراکنش‌ها بر اساس تاریخ 14:33
  • جداکننده و اسکلتون بارگذاری 07:44
  • Wrapping بارگذاری تراکنش در Suspense 10:03
  • واکشی روندهای مالی 10:42
  • ایجاد Suspense Fallback برای روندها 09:07
  • افزودن صفحه تراکنش و لینک 11:33
  • افزودن علامت‌گذاری فرم تراکنش 12:19
  • معرفی فرم هوک ری‌اکت 14:24
  • اعتبارسنجی فرم در فرم هوک ری‌اکت 10:12
  • معرفی کتابخانه Zod 07:22
  • افزودن اسکیمای Zod برای تراکنش‌ها 12:20
  • استفاده از متغیرهای محیطی 11:03
  • ذخیره‌ داده‌ فرم 11:14
  • اکشن‌های سرور در عمل 14:05
  • توضیح اکشن‌های سرور 07:25
  • کامپوننت خطای فرم 02:55
  • Supabase چیست؟ 08:37
  • راه‌اندازی و اتصال پروژه Next.js به Supabase 19:44
  • افزودن ستون‌ها به جدول تراکنش‌ها 03:21
  • خواندن تراکنش‌ها از Postgres 05:55
  • تولید داده‌ Seed 19:11
  • افزودن داده‌ به Postgres 08:28
  • اکشن‌های سرور - مدیریت خطاها 09:00
  • اکشن‌های سرور - اعتبارسنجی داده‌ سرور 07:52
  • مرز خطا برای روند و حذف سرور جی سان 06:04
  • فرم‌های پویای سطح متوسط 07:15
  • تبدیلات پیچیده و اعتبارسنجی با Zod 10:15
  • روند مالی - تابع Postgres - محاسبه‌ مجموع 11:18
  • روند مالی - فراخوانی تابع Postgres با استفاده از RPC 05:49
  • محدوده تاریخ تراکنش‌ها - انتخاب گزینه 11:48
  • محدوده تاریخ تراکنش‌ها - دریافت مجموع جاری و قبلی در Postgres 18:04
  • محدوده تاریخ تراکنش‌ها - نمایش روند 04:46
  • واکشی تراکنش‌ها با استفاده از تابع Postgres 14:40
  • ریفکتور کردن به کامپوننت کلاینت با Wrapper کامپوننت سرور 13:09
  • بارگذاری قابلیت بیشتر (صفحه‌بندی) 13:55
  • بهبودهای تجربه کاربری (دیگر داده‌ای نیست، اسپینر بارگذاری و غیره) 12:39
  • پیاده‌سازی ساده‌ دکمه حذف تراکنش 10:08
  • تأیید حذف و رابط کاربری بارگذاری 10:24
  • حذف تراکنش از لیست 05:13
  • مدیریت تغییر صفحه‌بندی 05:09
  • صفحه ویرایش تراکنش و واکشی داده‌ تراکنش 07:33
  • فرم ویرایش تراکنش و مدیریت 404 08:58
  • بروزرسانی اکشن سرور تراکنش (بروزرسانی داده‌ در Supabase) 03:18
  • رابط کاربری بارگذاری برای فرم ویرایش 04:14
  • طرح‌بندی و صفحه احرازهویت 11:14
  • فرم لاگین و فراخوانی اکشن سرور از طریق ارسال فرم 06:25
  • State تعلیق فرم 07:23
  • مدیریت خطاهای اکشن سرور فرم 08:51
  • بررسی احرازهویت Supabase و احرازهویت بدون پسورد (لینک‌های جادویی) 10:24
  • چگونه احرازهویت در Supabase (و به‌طور کلی) عمل می‌کند؟ 05:14
  • هندلر مسیر چیست؟ 07:16
  • هندلر مسیر ورود به سیستم 07:38
  • پیکربندی قالب‌های ایمیل Supabase و تست فرآیند احرازهویت 05:26
  • آیا کاربر احرازهویت شده است؟ 07:17
  • میان‌افزار چیست؟ ایجاد میان‌افزار برای رفرش توکن Supabase 12:23
  • خروج کاربران از سیستم 06:37
  • مجوز چیست؟ 05:45
  • محافظت از مسیرها در میان‌افزار 05:38
  • Postgres RLS چیست؟ چگونه با احراز‌هویت Supabase یکپارچه می‌شود؟ 11:10
  • لینک‌دهی کاربران با تراکنش‌ها و درج سیاست RLS 09:24
  • افزودن سیاست‌های RLS برای SELECT و UPDATE و DELETE 06:25
  • بروزرسانی اسکریپت Seeding با کاربران 08:14
  • طرح‌بندی تنظیمات و ناوبری جانبی 14:01
  • ذخیره‌سازی Supabase، باکت‌ها و RLS 05:59
  • ایجاد باکت و راه‌اندازی سیاست‌های امنیت 09:38
  • فرم آپلود تصویر 03:46
  • اکشن سرور آپلود تصویر 07:06
  • استایل‌دهی به ورودی فایل 02:44
  • بروزرسانی متادیتای کاربر 04:38
  • نمایش آواتار کاربر (URL های امضا شده) 13:24
  • کامپوننت هشدار 07:35
  • مدیریت بهتر خطاها در اکشن‌های سرور 06:22
  • حذف فایل‌ها (آواتارهای قدیمی) 08:46
  • کامپوننت‌های هشدار موفقیت و خطا - ریفکتور کردن 04:24
  • Scaffold کردن صفحه تنظیمات و فرم 10:23
  • تنظیمات کاربر - ورودی‌ها و رابط کاربری بارگذاری 11:39
  • تنظیمات کاربر - ذخیره و اعمال تنظیمات 07:59
  • تنظیمات کاربر - اعتبارسنجی داده‌ در سمت سرور با استفاده از Zod 11:13
  • نمایش خطاهای اعتبارسنجی (سمت سرور) 06:13

9,664,000 1,932,800 تومان

مشخصات آموزش

تسلط به Next.js 14 - راهنمای کامل فول‌استک

  • تاریخ به روز رسانی: 1404/06/14
  • سطح دوره:همه سطوح
  • تعداد درس:185
  • مدت زمان :24:28:11
  • حجم :9.61GB
  • زبان:دوبله زبان فارسی
  • دوره آموزشی: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
  • سطح دوره:
  • زبان: دوبله فارسی

آیا سوالی دارید؟

ما به شما کمک خواهیم کرد تا شغل و رشد خود را افزایش دهید.
امروز با ما تماس بگیرید