نكست جي إس

Next.js
Next.js logo
معلومات عامة
نوع
نظام التشغيل
المنصة
النموذج المصدري
المطور الأصلي
Guillermo Rauch[1]
المطورون
Vercel and open-source community[2]
موقع الويب
معلومات تقنية
الحجم
17.0 MB
لغة البرمجة
الإصدار الأول
25 أكتوبر 2016؛ منذ 8 سنين (2016-10-25)[3]
الإصدار التجريبي
12.1.1
الإصدار الأخير
12.1.0
المستودع
الرخصة
التسلسل
تأثر بـ

تعديل - تعديل مصدري - تعديل ويكي بياناتحول القالب

نيكست جي أس (بالإنجليزية: Next.js) هو إطار عمل لتطوير الويب مفتوح المصدر مبني فوق Node.js لتمكين تطبيقات الويب التي تستخدم مكتبة رياكت بإجراء بعض المميزات مثل العرض من جانب الخادم (SSR) وإنشاء مواقع الويب الثابتة (SSG). نيكست جي أس مذكور ضمن وثائق رياكت في قسم «الأدوات التطوير الموصى بها» وتنصح وثائق رياكت المطورين بذلك كحل عند «إنشاء موقع ويب مقدم من الخادم باستخدام Node.js».[4] حيث تقوم تطبيقات رياكت التقليدية بعرض محتواها في متصفح على جانب العميل، بينما يقوم Next.js بتوسيع هذه الوظيفة لتشمل تطبيقات الويب المعروضة على جانب الخادم.

حقوق الطبع والنشر والعلامات التجارية الخاصة بـ Next.js مملوكة لشركة Vercel ، المعروفة سابقًا باسم ZEIT، [5] والتي تقود عملية تطوير المصادر المفتوحة وتدعمها.[6]

نظرة عامة

[عدل]

Next.js هو إطار عمل React يمكّن العديد من الميزات الإضافية، بما في ذلك العرض من جانب الخادم (SSR) وإنشاء مواقع ويب ثابتة (SSG).[7] React هي مكتبة JavaScript تُستخدم تقليديًا لإنشاء تطبيقات الويب المعروضة في متصفح العميل باستخدام JavaScript.[8] يواجه المطورون العديد من المشكلات المتعلقة بهذه الإستراتيجية، مثل عدم تلبية احتياجات المستخدمين الذين ليس لديهم إمكانية الوصول إلى JavaScript أو قاموا بتعطيلها، ومشكلات الأمان المحتملة، وقت تحميل الصفحة، ويمكن أن يضر ذلك بالتحسين محركات البحث الخاصة بالموقع. [8] يُمكن لأطر العمل مثل Next.js تتجنب هذه المشكلات عن طريق السماح بعرض بعض أو كل موقع الويب على جانب الخادم قبل إرسالها إلى العميل. [8] [9] يُعد Next.js أحد أكثر الأطر شيوعًا في React.[10] إنها واحدة من العديد من «أدوات التطوير» الموصى بها والمتاحة عند بدء تطبيق جديد، وكلها توفر طبقة من التجريد للمساعدة في المهام المشتركة.[11] يتطلب نكست جي اس وجود Node.js ويمكن تهيئة نكست جي اس باستخدام مدير حزم نود جي اس (NPM).

ساهمت Google في مشروع Next.js ، بـ 43 Pull Request في عام 2019، التي ساعدت في تقليم JavaScript غير المستخدم، وتقليل وقت التحميل، وإضافة مقاييس محسّنة.[12] اعتبارًا من مارس 2020، يتم استخدام الإطار بواسطة العديد من مواقع الويب الكبيرة، بما في ذلك Netflix وGitHub وUber وTicketmaster وStarbucks . [8] في أوائل عام 2020، أُعلن أن Vercel قد حصل على واحد وعشرين مليون دولار في تمويل السلسلة A لدعم التحسينات على البرنامج. المؤلف الأصلي للإطار، Guillermo Rauch، هو حاليًا الرئيس التنفيذي لشركة Vercel ، والمطور الرئيسي للمشروع هو Tim Neutkens.[13]

تاريخ التطوير

[عدل]

تم إصدار Next.js لأول مرة كمشروع مفتوح المصدر على GitHub في 25 أكتوبر 2016؛ منذ 8 سنين (2016-10-25) . تم تطويره في الأصل استنادًا إلى ستة مبادئ: وظيفة خارج الصندوق لا تتطلب أي إعداد، وجافا سكريبت في كل مكان، وجميع الوظائف مكتوبة بلغة جافا سكريبت، وتقسيم الكود التلقائي والعرض من جانب الخادم الخادم، وجلب البيانات القابل للتكوين، وتوقع الطلبات، وتبسيط عملية التطوير.[14] تم الإعلان عن Next.js 2.0 في مارس 2017 بما في ذلك العديد من التحسينات التي سهلت العمل مع مواقع الويب الصغيرة. كما أنها زادت من كفاءة البناء وحسنت قابلية التوسع في ميزة تحديث الوحدات السريع.[15] تم إصدار الإصدار 7.0 في سبتمبر 2018 مع تحسين معالجة الأخطاء ودعم React context API لتحسين معالجة المسار الديناميكي. كان هذا أيضًا الإصدار الأول للترقية إلى الإصدار الرابع من ويب باك.[16] تم إصدار الإصدار 8.0 في فبراير 2019 وكان أول إصدار يقدم نشرًا بدون خادم للتطبيقات، حيث يتم تقسيم الكود إلى وظائف lambda يتم تشغيلها عند الطلب. قلل الإصدار أيضًا من الوقت والموارد المطلوبة لعمليات التصدير الثابتة وتحسين أداء الجلب المسبق.[17] تضمن الإصدار 9.3، الذي تم الإعلان عنه في مارس 2020، تحسينات متنوعة ودعمًا عالميًا لوحدة Sass و CSS.[18] في 27 يوليو 2020، تم الإعلان عن الإصدار 9.5 من Next.js ، مضيفًا إمكانات جديدة بما في ذلك التجديد الثابت المتزايد وإعادة الكتابة وإعادة التوجيه.[19] في 15 يونيو 2021، تم إطلاق الإصدار 11 من Next.js ، والذي قدم من بين أمور أخرى: دعم ويب باك 5، إمكانية المعاينة للبرمجة تعاونية في الوقت الفعلي "Next.js Live"، والوظيفة التجريبية للتحويل التلقائي من إنشاء تطبيق React إلى Next.js نموذج متوافق "Create React App Migration".[20] في 26 أكتوبر 2021، تم إصدار Next.js 12، بإضافة مجمع ومُترجم مكتوب بلغة Rust ، مما يجعل التجميع أسرع، ودعم AVIF ، ووظائف الحافة والبرمجيات الوسيطة، واستيراد وحدات ESM ودعم إسترداد الوحدات من خلال الورابط URL.[21]

التصميم والمميزات

[عدل]

يدعم Next.js التصميم باستخدام CSS بالإضافة إلى Scss وSass المترجمة مسبقًا و CSS-in-JS و JSX المُنسق.[22] بالإضافة إلى ذلك، تم تصميمه بدعم TypeScript والتجميع الذكي.[23] يتم استخدام مترجم Babel مفتوح المصدر لتحويل وترجمة التعليمات البرمجية إلى JavaScript يمكن للمتصفح فهمها من خلال مجمع الحزم ويب باك، وهي أداة أخرى مفتوحة المصدر، يتم استخدام كل هذه الأدوات مع Npm في الطرفية.[24]

الميزة الرئيسية لـ Next.js هي استخدامه للتقديم الصفحات من جانب الخادم لتقليل العبء على متصفحات الويب وتوفير أمان محسن. يمكن القيام بذلك لأي جزء من التطبيق أو المشروع بأكمله، مما يسمح بتخصيص الصفحات الغنية بالمحتوى لعرضها من جانب الخادم. [8] يمكن أيضًا القيام بذلك فقط للزائرين لأول مرة، لتقليل العبء على متصفحات الويب التي لم تقم بعد بتنزيل أي من أصول الموقع.[25] تكتشف ميزة «إعادة التحميل السريع» التغييرات أثناء إجرائها وتعيد عرض الصفحات المناسبة بحيث يتجنب الخادم الحاجة إلى إعادة التشغيل. يسمح هذا بالتغييرات التي تم إجراؤها على رمز التطبيق لتنعكس على الفور في متصفح الويب، على الرغم من أن بعض المتصفحات تتطلب تحديث الصفحة. [8] يستخدم البرنامج التوجيه-عبر-الملفات من أجل الصفحات ويسهل على المطورين ويتضمن نكست جي اس دعمًا للتوجيه الديناميكي. تشمل الميزات الأخرى استبدال الوحدات السريع بحيث يمكن استبدال الوحدات النمطية مباشر، وتقسيم الكود التلقائي، والذي يتضمن فقط الكود الضروري لتحميل الصفحة، والجلب المسبق للصفحة لتقليل وقت التحميل. [8]

يدعم Next.js أيضًا التجديد الثابت المتزايد (ISR) [26] وإنشاء الموقع الثابت (SSG) - عادةً ما يتم إنشاء نسخة مجمعة من موقع الويب أثناء وقت الإنشاء وحفظها كمجلد التالي. عندما يقوم المستخدم بتقديم طلب، يتم تخزين النسخة المبنية مسبقًا والتي هي عبارة عن صفحات HTML ثابتة مؤقتًا وإرسالها إليهم. هذا يجعل وقت التحميل سريعًا جدًا، ولكنه ليس مناسبًا لكل موقع ويب لأن المواقع التفاعلية التي تتغير كثيرًا وتستخدم الكثير من مدخلات المستخدم لن تكون مناسبة.

انظر أيضا

[عدل]

مراجع

[عدل]
  1. ^ April 21, Matt Asay in Developer on; 2020; Pst, 9:51 Am (21 Apr 2020). "How Next.js aims to simplify front-end development". تيك روبيبليك (بالإنجليزية). Archived from the original on 2022-05-23. Retrieved 2020-10-20. {{استشهاد ويب}}: الوسيط |مؤلف2-الأخير= يحوي أسماء رقمية (help)صيانة الاستشهاد: أسماء عددية: قائمة المؤلفين (link)
  2. ^ "vercel/next.js". GitHub. مؤرشف من الأصل في 2019-03-16. اطلع عليه بتاريخ 2019-03-17.
  3. ^ "Next.js First Release". GitHub. 14 مارس 2019. مؤرشف من الأصل في 2020-10-10. اطلع عليه بتاريخ 2019-03-17.
  4. ^ "Recommended Toolchains". React documentation. مؤرشف من الأصل في 2022-05-17. اطلع عليه بتاريخ 2021-07-10.
  5. ^ ZEIT is now Vercel، 21 أبريل 2020، مؤرشف من الأصل في 2021-12-15
  6. ^ "Develop. Preview. Ship. For the best frontend teams – Vercel". vercel.com. مؤرشف من الأصل في 2021-10-06. اطلع عليه بتاريخ 2020-09-22.
  7. ^ "Differences Between Static Generated Sites And Server-Side Rendered Apps". Smashing Magazine (بالإنجليزية). 2 Jul 2020. Archived from the original on 2022-05-21. Retrieved 2020-10-19.
  8. ^ ا ب ج د ه و ز Thakkar, Mohit (2020), Thakkar (ed.), "Next.js", Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (بالإنجليزية), Berkeley, CA: Apress, pp. 93–137, DOI:10.1007/978-1-4842-5869-9_3, ISBN:978-1-4842-5869-9, Archived from the original on 2022-06-06, Retrieved 2020-10-20
  9. ^ Thakkar, Mohit (2020), Thakkar (ed.), "Adding Server-Side Rendering to Your React Application", Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (بالإنجليزية), Berkeley, CA: Apress, pp. 139–152, DOI:10.1007/978-1-4842-5869-9_4, ISBN:978-1-4842-5869-9, Archived from the original on 2020-10-26, Retrieved 2020-10-20
  10. ^ December 2, Matt Asay in Developer on; 2019; Pst, 11:58 Am (2 Dec 2019). "Why front-end development may be the new frontier". تيك روبيبليك (بالإنجليزية). Archived from the original on 2022-03-25. Retrieved 2020-10-20. {{استشهاد ويب}}: الوسيط |مؤلف2-الأخير= يحوي أسماء رقمية (help)صيانة الاستشهاد: أسماء عددية: قائمة المؤلفين (link)
  11. ^ "Comparing Styling Methods In Next.js". Smashing Magazine (بالإنجليزية). 17 Sep 2020. Archived from the original on 2022-03-19. Retrieved 2020-10-20.
  12. ^ January 31, Matt Asay in Developer on; 2020; Pst, 6:33 Pm (Feb 2020). "An insider's look at Google's web framework contributions to Next.js and more". تيك روبيبليك (بالإنجليزية). Archived from the original on 2022-05-21. Retrieved 2020-10-19. {{استشهاد ويب}}: الوسيط |مؤلف2-الأخير= يحوي أسماء رقمية (help)صيانة الاستشهاد: أسماء عددية: قائمة المؤلفين (link)
  13. ^ "Static site generation with single page app functionality? That's what's coming Next(.js)". Stack Overflow Blog (بالإنجليزية الأمريكية). 7 Oct 2020. Archived from the original on 2022-03-25. Retrieved 2020-10-20.
  14. ^ Krill, Paul (31 Oct 2016). "Next step after Node.js: Framework for 'universal' JavaScript apps". InfoWorld (بالإنجليزية). Archived from the original on 2022-05-21. Retrieved 2020-10-20.
  15. ^ Krill, Paul (28 Mar 2017). "Next.js 2.0 plays better with React and JavaScript". InfoWorld (بالإنجليزية). Archived from the original on 2022-03-18. Retrieved 2020-10-20.
  16. ^ Krill, Paul (21 Sep 2018). "Next.js 7 framework compiles faster, supports WebAssembly". InfoWorld (بالإنجليزية). Archived from the original on 2022-05-21. Retrieved 2020-10-20.
  17. ^ Krill, Paul (14 Feb 2019). "Next.js 8 now supports serverless apps". InfoWorld (بالإنجليزية). Archived from the original on 2022-05-21. Retrieved 2020-10-20.
  18. ^ Krill, Paul (12 Mar 2020). "Next.js upgrade emphasizes static site generation". InfoWorld (بالإنجليزية). Archived from the original on 2022-05-21. Retrieved 2020-10-20.
  19. ^ Krill، Paul (27 يوليو 2020). "Next.js adds incremental static pages regeneration". InfoWorld. مؤرشف من الأصل في 2020-10-02. اطلع عليه بتاريخ 2020-09-22.
  20. ^ "Next.js 11". مؤرشف من الأصل في 2022-05-07. اطلع عليه بتاريخ 2021-07-10.
  21. ^ "Next.js 12". nextjs.org (بالإنجليزية). Archived from the original on 2022-06-02. Retrieved 2021-10-27.
  22. ^ "Comparing Styling Methods In Next.js". Smashing Magazine (بالإنجليزية). 17 Sep 2020. Archived from the original on 2022-03-19. Retrieved 2020-10-20.
  23. ^ Krill، Paul (14 فبراير 2019). "Next.js 8 now supports serverless apps". InfoWorld. مؤرشف من الأصل في 2020-10-02. اطلع عليه بتاريخ 2020-09-22.
  24. ^ January 31, Matt Asay in Developer on; 2020; Pst, 6:33 Pm (Feb 2020). "An insider's look at Google's web framework contributions to Next.js and more". تيك روبيبليك (بالإنجليزية). Archived from the original on 2022-06-08. Retrieved 2020-10-19. {{استشهاد ويب}}: الوسيط |مؤلف2-الأخير= يحوي أسماء رقمية (help)صيانة الاستشهاد: أسماء عددية: قائمة المؤلفين (link)
  25. ^ Thakkar, Mohit (2020), Thakkar (ed.), "Adding Server-Side Rendering to Your React Application", Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (بالإنجليزية), Berkeley, CA: Apress, pp. 139–152, DOI:10.1007/978-1-4842-5869-9_4, ISBN:978-1-4842-5869-9, Archived from the original on 2020-10-26, Retrieved 2020-10-20
  26. ^ "Incremental Static Regeneration with Next.js". Vercel (بالإنجليزية). Archived from the original on 2022-04-10. Retrieved 2022-03-06.

روابط خارجية

[عدل]