انتقل إلى المحتوى

نكست جي إس: الفرق بين النسختين

من ويكيبيديا، الموسوعة الحرة
التعديل اللاحق ←
تم حذف المحتوى تمت إضافة المحتوى
مرئينص الويكي
أُنشئَت بترجمة الصفحة "Next.js"
(لا فرق)

نسخة 15:21، 6 يونيو 2022

نيكست جي أس (بالإنجليزية: 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] يتطلب Next.js Node.js ويمكن تهيئته باستخدام Node Package Manager .

تبرعت 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؛ منذ 7 سنين (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 المُنسق . [11] بالإضافة إلى ذلك ، تم تصميمه بدعم TypeScript والتجميع الذكي. [22] يتم استخدام مترجم Babel مفتوح المصدر لتحويل وترجمة التعليمات البرمجية إلى JavaScript يمكن للمتصفح فهمها من خلال مجمع الحزم ويب باك ، وهي أداة أخرى مفتوحة المصدر، يتم استخدام كل هذه الأدوات مع npm في الطرفية. [12]

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

يدعم Next.js أيضًا التجديد الثابت المتزايد (ISR) [23] وإنشاء الموقع الثابت (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". TechRepublic (بالإنجليزية). Retrieved 2020-10-20. {{استشهاد ويب}}: الوسيط |last2= يحوي أسماء رقمية (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. اطلع عليه بتاريخ 2021-07-10.
  5. ^ ZEIT is now Vercel، 21 أبريل 2020
  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. 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: 93–137, DOI:10.1007/978-1-4842-5869-9_3, ISBN:978-1-4842-5869-9, Retrieved 2020-10-20 وسم <ref> غير صالح؛ الاسم "thakkar1" معرف أكثر من مرة بمحتويات مختلفة.
  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: 139–152, DOI:10.1007/978-1-4842-5869-9_4, ISBN:978-1-4842-5869-9, Retrieved 2020-10-20 وسم <ref> غير صالح؛ الاسم "thakkar2" معرف أكثر من مرة بمحتويات مختلفة.
  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". TechRepublic (بالإنجليزية). Retrieved 2020-10-20. {{استشهاد ويب}}: الوسيط |last2= يحوي أسماء رقمية (help)صيانة الاستشهاد: أسماء عددية: قائمة المؤلفين (link)
  11. ^ ا ب "Comparing Styling Methods In Next.js". Smashing Magazine (بالإنجليزية). 17 Sep 2020. Retrieved 2020-10-20. وسم <ref> غير صالح؛ الاسم "SmashingStyle" معرف أكثر من مرة بمحتويات مختلفة.
  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". TechRepublic (بالإنجليزية). Retrieved 2020-10-19. {{استشهاد ويب}}: الوسيط |last2= يحوي أسماء رقمية (help)صيانة الاستشهاد: أسماء عددية: قائمة المؤلفين (link) وسم <ref> غير صالح؛ الاسم "insiders" معرف أكثر من مرة بمحتويات مختلفة.
  13. ^ "Static site generation with single page app functionality? That's what's coming Next(.js)". Stack Overflow Blog (بالإنجليزية الأمريكية). 7 Oct 2020. Retrieved 2020-10-20.
  14. ^ Krill, Paul (31 Oct 2016). "Next step after Node.js: Framework for 'universal' JavaScript apps". InfoWorld (بالإنجليزية). Retrieved 2020-10-20.
  15. ^ Krill, Paul (28 Mar 2017). "Next.js 2.0 plays better with React and JavaScript". InfoWorld (بالإنجليزية). Retrieved 2020-10-20.
  16. ^ Krill, Paul (21 Sep 2018). "Next.js 7 framework compiles faster, supports WebAssembly". InfoWorld (بالإنجليزية). Retrieved 2020-10-20.
  17. ^ Krill, Paul (14 Feb 2019). "Next.js 8 now supports serverless apps". InfoWorld (بالإنجليزية). Retrieved 2020-10-20.
  18. ^ Krill, Paul (12 Mar 2020). "Next.js upgrade emphasizes static site generation". InfoWorld (بالإنجليزية). 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". اطلع عليه بتاريخ 2021-07-10.
  21. ^ "Next.js 12". nextjs.org (بالإنجليزية). Retrieved 2021-10-27.
  22. ^ Krill، Paul (14 فبراير 2019). "Next.js 8 now supports serverless apps". InfoWorld. مؤرشف من الأصل في 2020-10-02. اطلع عليه بتاريخ 2020-09-22.
  23. ^ "Incremental Static Regeneration with Next.js". Vercel (بالإنجليزية). Retrieved 2022-03-06.

روابط خارجية

مجلوبة من «https://ar.wikipedia.org/w/index.php?title=نكست_جي_إس&oldid=58314117»