بیایید 10 پروژه NextJs بسازیم

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

• یادگیری ساخت هر اپلیکیشنی با NextJs
• یادگیری کامپوننت‌های سرور و کلاینت ری‌اکت
• رندرینگ سمت کلاینت و سرور
• یادگیری مسیریابی مبتنی بر فایل NextJs، مسیرهای تودرتو، گروه‌های مسیر و مسیریابی پویا
• یادگیری واکشی داده در هر دو کامپوننت سرور و کلاینت
• یادگیری در مورد هوک‌های usePathname و useRouter
• چگونه یک اپلیکیشن NextJs را استایل‌دهی کنیم؟

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

• آشنایی با ساختاردهی وبسایت با HTML
• آشنایی با استایل‌دهی وبسایت با CSS
• Tailwind CSS یک افزونه خوب است اما الزامی نیست.
• چگونه DOM را با جاوااسکریپت دستکاری کنید؟
• آشنایی جزئی با نحوه کار ری‌اکت با DOM مجازی و رندرینگ کامپوننت‌ها

توضیحات دوره

NextJs یک فریمورک متن‌باز توسعه وب است که توسط Vercel ساخته شده و بر پایه کتابخانه جاوااسکریپت ری‌اکت بنا شده است. این فریمورک به یکی از محبوب‌ترین فریمورک‌ها برای توسعه‌دهندگان فرانت‌اند و بک‌اند تبدیل شده است، زیرا به صورت پیش‌فرض رندرینگ سمت سرور و تولید سایت استاتیک را ارائه می‌دهد. زیرا یک فریمورک است، NextJs بسیاری از جزئیات و نکات را که ری‌اکت ارائه نمی‌دهد، مدیریت می‌کند. برای مثال:

• بهینه‌سازی‌های داخلی برای تصاویر و فونت‌ها دارد تا هنگام بارگذاری صفحه باعث تغییرات طرح‌بندی نشوند.
• از React Suspense برای فعال‌سازی استریمینگ HTML پویا از سرور استفاده می‌کند تا کاربران بتوانند همچنان در حین پردازش محتوای بیشتر از سرور، با وبسایت شما تعامل داشته باشند.
• به‌ صورت پیش‌فرض از کامپوننت‌های سرور ری‌اکت استفاده می‌کند که هنگام کوئری پایگاه داده ایمن‌تر هستند و لایه‌ اضافی امنیتی برای اپلیکیشن شما فراهم می‌کنند، زیرا داده‌ آن در کلاینت ذخیره نمی‌شود.
• NextJs اجازه می‌دهد کامپوننت‌های سرور را به صورت غیرهمزمان ساخته و هنگام نامگذاری کامپوننت‌ها، از کلیدواژه‌های async/await برای واکشی داده‌ از یک منبع استفاده کنیم.
• یکپارچه‌سازی‌های متعددی از CSS را فراهم می‌کند، از جمله ماژول‌های CSS، فریمورک‌ها و کتابخانه‌های CSS-in-JS مانند Emotion
• پشتیبانی از تولید سایت استاتیک افزایشی (ISR)، کش کردن و از پیش رندرینگ جزئی (PPR) که اخیرا معرفی شده و هنوز آزمایشی است.
• پشتیبانی از اکشن‌های سرور که توابع غیرهمزمانی هستند که می‌توانند در سرور و کلاینت اجرا شوند تا در یک راند شبکه انجام شوند.
• با استفاده از هندلرهای مسیر می‌توانید مسیرهای API خود مانند احراز هویت و وب‌هوک‌ها را بسازید.
• می‌توانید میان‌افزار خود را پیاده‌ کنید.
• یک سیستم مسیریابی مبتنی بر فایل دارد که امکان تولید مسیرهای پویا در زمان بیلد و تودرتوسازی مسیرها را فراهم می‌کند.

NextJs بر پایه ری‌اکت، Turbopack و Speedy Web Compiler (SWC) ساخته شده است.

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

• توسعه‌دهندگان مبتدی که درباره ری‌اکت کنجکاو هستند.
• توسعه‌دهندگان مبتدی که درباره NextJS کنجکاو هستند.
• توسعه‌دهندگان مبتدی که می‌خواهند سفر فرانت‌اند خود را با NextJs بهبود بخشند.