عملکرد به صورت پیش فرض با Next.js

Next.js بسیاری از بهینه‌سازی‌ها را در برنامه React شما انجام می‌دهد تا مجبور نباشید

حسین جرده

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

این مقدمه به طور خلاصه بسیاری از ویژگی های ارائه شده توسط چارچوب را در سطح بالا پوشش می دهد. سایر راهنماهای این مجموعه ویژگی ها را با جزئیات بیشتری بررسی خواهند کرد.

چه چیزی یاد خواهید گرفت؟

اگرچه Next.js به طور پیش‌فرض تعدادی بهینه‌سازی عملکرد را ارائه می‌کند، اما هدف این راهنماها توضیح بیشتر آنهاست و به شما نشان می‌دهد که چگونه می‌توانید از آنها برای ایجاد یک تجربه سریع و کارآمد استفاده کنید.

بهینه سازی های زیادی وجود دارد که می توان به طور کلی به سایت های React اضافه کرد که برای برنامه های ساخته شده با Next.js نیز کار می کنند. این موارد تحت پوشش قرار نخواهند گرفت زیرا تمرکز بر آنچه Next.js به طور خاص ارائه می دهد است. برای کسب اطلاعات بیشتر درباره بهینه‌سازی‌های عمومی React، مجموعه React ما را بررسی کنید.

Next.js چه تفاوتی با React دارد؟

React کتابخانه ای است که ساخت رابط کاربری را با استفاده از رویکرد مبتنی بر مؤلفه آسان می کند. اگرچه React قدرتمند است، اما به طور خاص یک کتابخانه UI است. بسیاری از توسعه‌دهندگان ابزارهای اضافی مانند بسته‌بندی ماژول (مثلاً بسته وب ) و ترانسپایلر (به عنوان مثال Babel ) را برای داشتن یک زنجیره ابزار کامل در اختیار دارند.

در مجموعه React ، ما از رویکرد Create React App (CRA) برای چرخش سریع برنامه‌های React استفاده کردیم. CRA با ارائه یک زنجیره ابزار کامل با یک فرمان، مشکل راه اندازی یک برنامه React را برطرف می کند.

اگرچه چند بهینه سازی پیش فرض در CRA وجود دارد، هدف این ابزار ارائه یک راه اندازی ساده و سرراست است. این انتخاب به توسعه‌دهندگان داده می‌شود تا تصمیم بگیرند که پیکربندی‌ها را خارج کنند و تغییر دهند.

Next.js که می تواند برای ایجاد یک برنامه جدید React نیز استفاده شود، رویکرد متفاوتی دارد. بلافاصله تعدادی بهینه سازی رایج را ارائه می دهد که بسیاری از توسعه دهندگان دوست دارند داشته باشند اما راه اندازی آن دشوار است، مانند:

  • رندر سمت سرور
  • تقسیم خودکار کد
  • پیش واکشی مسیر
  • مسیریابی سیستم فایل
  • استایل CSS-in-JS ( styled-jsx )

راه اندازی

برای ایجاد یک برنامه Next.js جدید، دستور زیر را اجرا کنید:

npx create-next-app new-app

سپس به دایرکتوری بروید و سرور توسعه را راه اندازی کنید:

cd new-app
npm run dev

جاسازی زیر ساختار دایرکتوری یک برنامه Next.js جدید را نشان می دهد.

  • روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
  • برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .

توجه داشته باشید که pages/ دایرکتوری با یک فایل منفرد ایجاد می شود: index.jsx . Next.js از یک رویکرد مسیریابی سیستم فایل پیروی می کند، که در آن هر صفحه در این فهرست به عنوان یک مسیر جداگانه ارائه می شود. ایجاد یک فایل جدید در این فهرست، مانند about.js ، به طور خودکار یک مسیر جدید ( /about ) ایجاد می کند.

همچنین می توان کامپوننت ها را مانند سایر برنامه های React ایجاد و استفاده کرد. یک پوشه components/ دایرکتوری قبلاً با یک جزء منفرد به nav.js ایجاد شده است که قبلاً در index.js وارد شده است. به‌طور پیش‌فرض، هر وارداتی که در Next.js استفاده می‌شود، تنها زمانی واکشی می‌شود که آن صفحه بارگیری می‌شود و مزایای تقسیم خودکار کد را فراهم می‌کند.

علاوه بر این، هر بارگذاری اولیه صفحه در Next.js در سمت سرور ارائه می شود . اگر پانل شبکه را در DevTools باز کنید، می‌توانید ببینید که درخواست اولیه سند یک صفحه کاملاً ارائه‌شده توسط سرور را برمی‌گرداند.

تب Preview پانل Network نشان می‌دهد که Next.js در صورت درخواست صفحه، HTML کامل بصری را برمی‌گرداند.
تب Preview پانل Network نشان می‌دهد که Next.js در صورت درخواست صفحه، HTML کامل بصری را برمی‌گرداند.

اینها تنها تعدادی از بسیاری از ویژگی های ارائه شده توسط Next.js به صورت خودکار هستند. بسیاری از آنها قابل تنظیم هستند و می توان آنها را برای موارد استفاده مختلف تغییر داد.

بعدش چی؟

جناس مورد نظر 😛

هر راهنمای دیگر در این مجموعه، ویژگی خاص Next.js را با جزئیات بررسی می کند: