ما هي Nextjs وآلية عملها

Next.js ، إذا كنت من المهتمين بتطوير الويب وصنع المواقع، فهناك إحتمال إن تكون سمعت Next.js.

لماذا هذا الكلام الكثير عنه؟ ما الجديد في ذلك؟ تابع معنا لتلقي نظرة على Next.js.

مقدمة إلى Next.js

مع بعض المعرفة الأساسية في React و JavaScript، ستكون في طريقك إلى next.js.
Next.js هو إطار عمل JavaScript تم إنشاؤه بواسطة Zeit. يتيح لك إنشاء عرض من جانب الخادم وتطبيقات ويب ثابتة باستخدام React.
إنها أداة رائعة لبناء موقعك الإلكتروني التالي. يحتوي على العديد من الميزات والمزايا الرائعة، والتي يمكن أن تجعل next.js خيارك الأول لبناء تطبيق الويب التالي.

لا تحتاج إلى أي تكوين لحزمة الويب أو ما شابه لبدء استخدام Next.js. حيث يأتي مع تكوينه.
كل ما تحتاجه هو تشغيل npm run dev والبدء في بناء التطبيق الخاص بك.

اقرأ أيضاً: ما هي تقنية جام ستاك (JAMstack) ؟

ما هو Next.js

يعد Next.js إطار عمل React لتطوير تطبيقات Javascript ذات الصفحة الواحدة. تتم عملية توليد الشيفرة بشكل مسبق أثناء البناء pre-rendered applications,

إنها أداة رائعة لإنشاء تطبيق ويب وتشتهر بالعرض من جانب الخادم.
يمكن للمطورين الذين لديهم معرفة بـ HTML و CSS و Java Script و React التعلم بسهولة أو التبديل إلى next.js.

فوائد هذا الإطار عديدة، وخاصة في مايتعلق بالسرعة والأداء. حيث يعمل على إنشاء تطبيقات عالية الأداء

Next.js مستوحى من PHP ويستفيد من JavaScript، والذي يسمح بتصدير مكونات التطبيق مما يسمح بإجراء اختبارات فردية لكل مكون، وكذلك تنزيل آلاف المكونات أو الوحدات من npm.

عندما نتحدث عن التطبيقات في Next.js، يجب أن نتحدث عن نظام CSS يسمى (Styled-jsx)، تم إنشاء هذا النظام خصيصاً للعمل مع Next.js، يتيح هذا النظام العمل بكل قوة CSS مباشرة في موقعنا ملفات JS.

يمنح Styled-jsx مزايا معينة.
على سبيل المثال، عندما نمثل المكونات، فإننا نقوم فقط بإنشاء CSS الذي يتم استخدامه، وبمجرد عدم استخدام المكون، فإنه يزيل CSS تلقائياً، مما يعني أنه لن يكون لدينا أبدًا CSS غير ضروري .

خصائص Next.js

هناك العديد من خصائص next.js ومنها:

• Hot Code Reloading: إعادة تحميل التطبيق تلقائياً عندما يتم حفظ التغييرات في الكود.
• تقسيم الشفرة تلقائياً (Code Splitting): من خلال هذه الميزة، يتم تجميع كل عملية استيراد في الرمز وتقديمها مع كل صفحة.
  هذا يعني أنه لا يتم تحميل التعليمات البرمجية غير الضرورية على الصفحة.
• التوافق مع النظام البيئي: متوافق مع JavaScript و Node and response.
• عرض الخادم: عرض مكون التفاعل بسهولة على الخادم قبل إرسال HTML إلى العميل.
• Styled-JSX: يتيح لك Styled-JSX كتابة CSS مباشرةً داخل كود JavaScript.

اقرأ أيضاً: ماهو نموذج DevOps؟ دليل المبتدئين لفهم DevOps لعام 2020

لماذا يوجد Next.js؟ ألا تكفي React؟

أي شخص يستخدم React، ممكن أن يسأل هذا السؤال. الإجابة هي أن next.js قامت بحل مشكلتين:

1. يمكن أن يكون التحميل الأولي للصفحة بطيئاً بالنسبة للمستخدم، لأنه يجب تحميل جميع JavaScript أولاً قبل ظهور أي شيء على الصفحة.
2. قد تواجه مشكلة في تحسين محرك البحث (SEO) حيث يتعين على محركات البحث تشغيل وفهرسة تطبيقك للحصول على أي معلومات.

توجد طريقتان لحل هذه المشكلات، إما باستخدام عرض جانب الخادم (SSR)، أو باستخدام موقع تم إنشاؤه بشكل ثابت.

بالنسبة لـ Next.js يمكن القيام بالأمرين معاً.

ما الميزات التي يجب معرفتها؟

Next.js مليء بالكثير من الميزات الرائعة التي ستجعل تطبيقاتك أكثر تميزاً. منها:

تجربة تطوير مميزة (Development experience)

• يحتوي next.js على أشياء رائعة مثل إعادة تحميل التعليمات البرمجية المهمة ومجموعة متنوعة من خيارات التصميم (style-jsx و CSS Modules و Sass و moooore)
• دعم TypeScript ودعم مضمن لمتغيرات البيئة وتقسيم الكود تلقائيًا ( أي لا تقوم الصفحات إلا بتحميل JavaScript الذي يحتاجون إليه، وليس أكثر).

التوجيه (Routing)

بالنسبة للصفحات في تطبيقك، فإن بنية التوجيه بأكملها تعتمد على نظام الملفات.
عندما تضع ملف جافا سكريبت في الصفحات، فإنه يصبح مسارًا تلقائيًا، ولا يلزم تكوين (لذلك سيصبح contact.js هو example.com/contact).

إلى جانب الصفحات العادية، يمكنك إعداد توجيه واجهة برمجة التطبيقات أيضاً. باستخدام دليل الصفحات / api /، سيتم التعامل مع أي ملف تضعه هناك كنقطة نهاية API.

API

هناك بعض المكونات التي يوفرها Next.js للمطورين للعمل معها.

• next / link: لتمكين الانتقالات من جانب العميل بين المسارات.
• next / head: يسمح للمطورين بإلحاق عناصر بـ للصفحة المعروضة.
• next / router: خطاف للوصول إلى كائن جهاز التوجيه داخل مكونات التطبيق الخاص بك.
• next / amp: يسمح لك بإنشاء صفحات AMP.
• مقياس الاداء: يسمح لك بتحليل وقياس أداء صفحتك. يسمح لك بتتبع المقاييس المخصصة الخاصة بك.

CLI

واجهة سطر الأوامر next.js لطيفة وسهلة الاستخدام. يسمح لك بما يلي:

• إنشاء عمليات إنتاج محسّنة.
• إمكانية تشغيل التطبيق في وضع التطوير (development mode).
• إمكانية بشغيل التطبيق في وضع الإنتاج (production mode) بعد الإنشاء.
• تصدير تطبيق Next.js الخاص بك كموقع ثابت.
• التكوين المخصص:
  إذا كنت ترغب في تخصيص سلوك أكثر تقدمًا في تطبيقك، فيمكنك إنشاء ملف next.config.js.
  يسمح لك ملف التكوين هذا بتخصيص جميع أنواع الأشياء، مثل إضافة دعم لملحقات الصفحة المخصصة، والإشارة إلى فوائد التحسين الثابتة، وإعداد أدلة بناء مخصصة.

اقرأ أيضاً: مقدمة إلى GraphQL وكيف تعمل؟

كيف أبدأ تعلم Next.js

Next.js هي تقنية جديدة نسبيًا، وأسهل طريقة لتعلم الأساسيات كانت من خلال الاطلاع على وثائق NextJS والبرنامج التعليمي الرسمي على nextjs.org/learn

يقوم البرنامج التعليمي الرسمي بعمل جيد جدًا حيث يقوم بتدريس أساسيات next.js باستخدام الرموز الفعلية التي يمكن للمتعلم الترميز معها.

كيفية تطبيق Next.js

يعد إعداد تطبيق Next Js أمرًا سهلاً حقًا. كل ما عليك فعله هو:

1-run npm install --save react react-dom next

2-أضف الحزمة الخاصة بك “package.json”

{ “scripts”:

{

“dev”: “next”,

“build”: “next build”,

“start”: “next start”

}

}

3- أنشئ دليل صفحة في الجذر وأضف ملف index.js

نصائح وإرشادات

يأتي Next Js بمجموعة كبيرة من الميزات التي تجعل عرض تطبيقات التفاعل من جانب الخادم أمراً سهلاً حقًا. تتضمن هذه الميزات إعادة تحميل الرمز والتوجيه التلقائي وتقسيم الكود تلقائياً.

الطريقة الوحيدة لتكون قادراً على رؤية هذه الميزات أثناء العمل ، هي في الواقع من خلال إنشاء تطبيق Next Js. لذا بقدر ما تتصفح الأدلة والمستندات ، فأنت بحاجة إلى جعل يديك تعملان في بناء مشاريع بسيطة حتى تتمكن من فهمها بشكل أفضل.

بالنهاية Next.js هو إطار عمل سهل ومميز عليك تجربته، في حال كنت تبحث عن المزيد من السرعة والقوة عند تصميم موقعك على الويب