توضیحات

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

نام دوره : Next.js by Example 

دوره در تاریخ 2/2024 به روز رسانی شد

3 سکشن جدید به دوره اضافه شد

یادداشت مدرس:

دوره در اواخر 8/2023 به روز رسانی شد

سکشن [app] Deploying with External Services اضافه شد

دوره در تاریخ 8/2023 به روز رسانی و به کیفیت 1080 ارتقا یافت

مدت زمان دوره به 17 ساعت افزایش پیدا کرد

یادداشت مدرس:

پیش نیاز:

• آشنایی با توسعه وب مدرن: HTML, CSS, JavaScript, npm
• آشنایی با React، از جمله useState و useEffect

توضیحات:

Next.js به عنوان «چارچوب React برای تولید» ، توصیف شده است. و ساخت برنامه و وب سایت ها را با ری اکت بسیار آسان می کند.

دوره آموزش Next.js با مثال با توسعه دو مثال شما را در یادگیری Next.js راهنمایی می‌کند: یک وب‌سایت کاملاً ثابت و یک برنامه ترکیبی (ایستا + رندر سمت سرور) .

مثال اول

ساخت یک وب سایت وبلاگ شخصی، شما را با مفاهیم اساسی Next.js مانند پیش رندر ، مسیریابی مبتنی بر سیستم فایل و هیدراتاسیون آشنا می کند .

به شما نشان می‌دهد که چگونه داده‌ها را در صفحاتی که در زمان ساخت به‌صورت ایستا تولید می‌شوند بارگذاری کنید ، و چگونه به صفحات خود در فایل‌های CSS جهانی یا با کتابخانه styled-jsx که استایل‌هایی با محدوده مؤلفه ارائه می‌دهد، استایل دهید.

بخش استقرار به شما تمام گزینه ها برای استقرار برنامه در حال اجرای خود در تولید را آموزش می دهد.

مثال دوم

سایت دومی که توسعه خواهید داد یک وب سایت فروشگاهی است. این یک برنامه پیچیده‌تر خواهد بود که داده‌های خود را از یک CMS بدون سر ( Strapi ) بارگیری می‌کند. و از ویژگی‌های پیشرفته Next.js مانند بازسازی استاتیک افزایشی برای بازتاب خودکار تغییرات در داده‌های باطن استفاده می‌کند.

به شما نشان می دهد که چگونه TypeScript را فعال کنید.همه ویدیوها به جز یکی از جاوا اسکریپت استفاده می کنند. اما اگر TypeScript را ترجیح می دهید، کد TypeScript کامل برای مثال فروشگاه را در مخزن GitHub پیدا خواهید کرد.

این وب‌سایت از کتابخانه محبوب Tailwind CSS برای استایل‌سازی و از مؤلفه Next Image برای بهینه‌سازی تصویر استفاده می‌کند.

راه‌های مختلفی برای بارگیری داده‌ها از یک API خارجی، از جمله نوشتن مسیرهای API خود در Next.js و نحوه انتخاب بهترین رویکرد برای نیازهای خاص خود خواهید دید.

این مثال شامل یک سیستم احراز هویت ایمن مبتنی بر JWT و کوکی‌ها می‌شود و کتابخانه React Query برای ذخیره‌سازی داده‌ها در سمت سرویس گیرنده استفاده خواهد شد.

کد منبع کامل برای همه نمونه ها ارائه شده است، با یک راه آسان برای مشاهده تغییرات ایجاد شده در هر سخنرانی.

این دوره با آخرین نسخه Next.js یعنی 12 به روز است.

دوره آموزش Next.js با مثال برای چه کسانی است:

• React/توسعه دهندگان وب که می خواهند برنامه های وب استاتیک یا ترکیبی (ایستا + SSR) را با Next.js بسازند.

بخشی از دوره :