ابـراهــیم
ابـراهــیم
خواندن ۲ دقیقه·۲ سال پیش

1) معرفی Nextjs

معرفی Nextjs
معرفی Nextjs


قبل از شروع کار با Nextjs باید بدونیم که اصلا چیه و به چه دردی می خوره؟

فریم ورک Nextjs توسط vercel برای برطرف کردن مشکلات و محدودیت های React در زمان تولید محصول React ایجاد شده.


قابلیت ها و مزایای Nextjs

  • سئوی ضعیف یکی از بزرگ ترین مشکلاتی هست که وبسایت های ساخته شده با React باهاش سروکار دارن. Nextjs تونسته این مشکل رو به سادگی برطرف کنه.
  • افزایش سرعت بارگیری با استفاده از Pre-rendering
  • قابلیت بهینه سازی تصاویر
  • قابلیت جابه جایی بین صفحات بدون لود شدن دوباره صفحه
  • سیستم Routing بر اساس نام فایل ها (file based)
  • پشتیبانی از انواع روش های استایل دهی
  • پشتیبانی کامل از typescript
  • سفارشی سازی API برای ارتباط با backend

و مزایای دیگه ای که برای خلاصه شدن مطلب، مهم ترین هاشون بیان شد


معایب Nextjs

فریم ورک Nextjs هم مثل بقیه ابزار ها یه سری معایب هم داره که مهم ترینش اینه که وابسته به محیط node.js برای اجرا در سمت سروره (در سرور هایی که از node.js برای کدنویسی backend استفاده نکردند، به درستی کار نمیکنه).

البته در مقایسه با مزایای زیادی که داره، این مشکلات خیلی به حساب نمیان.


پیش نیاز های Nextjs

برای شروع یادگیری Nextjs نیاز به دانش متوسطی در React و آشنایی با مفاهیم API دارید.

راستی یکی از دوستان آموزش مقدماتی React رو مرحله به مرحله گذاشته که بنظرم خیلی کامل و روون توضیح داده بود. برای کسانی که میخوان ری اکت رو استارت بزنن، پیشنهاد میشه.

دستورات Nextjs در backend اجرا میشه. پس اگه با مفاهیم بک اند آشنایی داشته باشین دستتون جلوتره


معرفی Gatsby.js

این فریم ورک یه جورایی رقیب Nextjs میاد و یه سری قابلیت های بهتری داره و در عوض بعضی از قابلیت های Nextjs رو نداره. برای مثال Gatsby دارای پلاگین ها و کتابخانه های بیشتری نسبت به Nextjs هست که کار باهاش رو ساده تر می کنند؛ اما Nextjs میتونه به طور ترکیبی SSR و SSG را درون پروژه اعمال بکنه، در حالی که Gatsby فقط محدود به اعمال یکی از این روش ها درون هر پروژه هست.

در اینجا فقط خواستم معرفیش کنم و قرار نیست بیشتر از این در موردش صحبت بشه

منابع

What is Next.js?

Next.JS vs. Gatsby.JS Frameworks- All You Need to Know

Next.js چیست و چه کاربردی دارد؟

nextjsgatsbyreactssg
ساده بگیر ولی دستِ کم نگیر
شاید از این پست‌ها خوشتان بیاید