ما هو Next js
اول مشروع نكست Next js
المميزات
سرعة التطوير
نيكست يوفر ميزات حديثة ومبتكرة تسهل عملية التطوير لتصميم تطبيقات رياكت متقدمة، ومع إدخال ميزة المجمّع compiler الخاص به في الإصدار Next.js 12، زادت سرعة التطوير فيه أيضًا بالمقارنة مع رياكت React، وبالتالي يقلّل نيكست من الوقت الذي ينتظره المبرمج لتحديث الشيفرة البرمجية، مما يقلّل من الإحباط والوقت الضائع خلال التطوير.
جلب البيانات وأوقات التحميل
يمكن لنيكست عبور شجرة React والاستعلام عن البيانات الموجودة في الخادم، مما يسمح بالتحميل المُسبق لبيانات الصفحة. وهذا يؤدي في كثير من الأحيان إلى تقليل أوقات تحميل التطبيق للصفحات المصممة باستخدام نيكست مقارنة بالصفحات المكتوبة بإطار رياكت العادي فحسب.
التصيير وتحسين محركات البحث
يتميز نيكست بميزة التصيير المُسبق، بينما يستخدم رياكت التصيير المُعتمد على المستخدم وتوفر الصفحات المُصيَّرة والمعدة مسبقًا استراتيجيات تحسين محركات بحث فعالة الصعب تحقيقها في تطبيق رياكت عادي.
التوجيه
يوفر نيكست نظام ملفات مبني ومحدّد مسبقًا لعملية التوجيه routing. ويساهم هذا النظام في تقليل المرونة مقارنة بالخيارات المتنوعة لمكتبة رياكت (مثل مكتبة React Router)، ولكنه يبسّط عملية إعداد الصفحة والتوجيه.
نيكست هي أداة مثالية لتحسين تطبيقات رياكت التي تستفيد من عملية التصيير المسبق، بما في ذلك المتاجر الإلكترونية، وتطبيقات وسائل التواصل الاجتماعي، وأنظمة حجز التذاكر، والمنصات التعليمية.
التصيير في نيكست
نيكست يوفر ميزة التصيير المُسبق، مما يسمح بالتحميل المُسبق لبيانات الصفحة. وهذا يؤدي في كثير من الأحيان إلى تقليل أوقات تحميل التطبيق للصفحات المصممة باستخدام نيكست مقارنة بالصفحات المكتوبة بإطار رياكت العادي فحسب.
يعدّ نيكست إطار عمل سريع جدًا تعتمد عليه المواقع التي تتطلب في عملها حجم بيانات كبير مثل هولو Hulu ونيتفلكس Netflix. فإذا كنت بالفعل ملمًا بمكتبة ريآكت React، فيجب أن تتعرف بالتأكيد على هذه التقنية التي تزداد انتشارًا يومًا بعد يوم، فعلى الرغم من أن كلاً من رياكت و نيكست يساعدان في تصميم واجهات مستخدم فعالة لمواقع الويب، إلا أنّ لديهما بعض الاختلافات الرئيسية، حيث يعد نيكست أكثر تطورًا وتفصيلًا من رياكت، وهو مناسب تحديدًا للمواقع التي تهتم بتحسين محركات البحث SEO أو التصيير الم
العيوب
التعقيد: نيكست هو إطار عمل أكثر تعقيدًا من رياكت، ويتطلب فهمًا أعمق لجافا سكريبت ورياكت.
الحدود: نيكست يفرض بعض القيود على طريقة تصميم التطبيقات، مثل استخدام نظام ملفات محدد مسبقًا للتوجيه.
الوزن: نيكست يضيف بعض الوزن إلى التطبيق بسبب الميزات الإضافية التي يقدمها.
التعلم: نيكست يتطلب وقتًا أطول للتعلم مقارنة برياكت، خاصةً للمطورين الجدد.
التوافق: نيكست قد لا يكون متوافقًا مع جميع المكتبات والتقنيات الأخرى التي تستخدمها في تطبيقك.
اول مشروع نكست next js
ادوات التشغيل
Node js
تاكد من تثبيت برنامج Node js والافضل يكون احدث اصدار او انتقل إلى موقع Node.js الرسمي وحمّل المثبت المناسب لنظام Windows الخاص بك
visual studio code
تثبيت next js
نقوم بانشاء مشروع جديد باستخدام الكود التالي
npx create-next-app@latest
بعد تنفيذ الأمر npx create-next-app@latest، سيطلب منك البرنامج الإجابة على بعض الأسئلة لتخصيص مشروع Next.js الخاص بك.
اختر اسم المشروع: بعد تنفيذ الأمر، سيطلب منك البرنامج إدخال اسم المشروع الخاص بك. يمكنك إدخال الاسم الذي تريده أو الضغط على Enter لاختيار الاسم الافتراضي.
What is your project named? my-next-app
اختيار TypeScript: سيطلب منك تحديد ما إذا كنت تريد استخدام TypeScript. TypeScript هي لغة برمجة تعتمد على JavaScript لكنها تضيف دعمًا للأنواع (types)، مما يساعد في كتابة شيفرة أكثر أمانًا وتنظيمًا. إذا كنت مرتاحًا للعمل مع JavaScript العادي، يمكنك اختيار “No”، أما إذا كنت ترغب في تعلم واستخدام TypeScript، اختر “Yes”.
Would you like to use TypeScript? No
اختر نمط الـ ESLint: هو أداة لتحليل الشيفرة البرمجية والعثور على الأخطاء والتأكد من التزام الشيفرة بالمعايير. إذا اخترت “Yes”، سيتم إعداد ESLint في مشروعك لمساعدتك على كتابة شيفرة نظيفة وخالية من الأخطاء.
Would you like to use ESLint? Yes
اختيار نظام CSS: ستحتاج إلى اختيار طريقة لتنسيق المظهر الخارجي للموقع. Next.js يوفر خيارات مثل CSS Modules وSass وTailwind CSS. إذا اخترت “Tailwind CSS”، سيتم تثبيت وإعداد مكتبة Tailwind CSS التي تساعدك في إنشاء تصاميم متجاوبة بسهولة.
Would you like to use Tailwind CSS? Yes
اختر وحدة الـ src directory: بعض المطورين يفضلون تنظيم ملفات المشروع داخل مجلد src. إذا اخترت “Yes”، سيتم إنشاء مجلد src تلقائيًا وسيتم وضع جميع الملفات البرمجية داخله. هذا يساعد في تنظيم المشروع بشكل أفضل.
Would you like to use `src/` directory? Yes
اختر وحدة الـ import aliases: إذا كنت تستخدم مكونات أو ملفات من مجلدات مختلفة في المشروع، import aliases يساعدك في كتابة مسارات استيراد أقصر وأسهل. مثلاً، بدلاً من كتابة ../../../components/Button، يمكنك كتابة @/components/Button إذا اخترت تفعيل هذه الميزة.
Would you like to use experimental `app/` directory? No
تثبيت الحزم: بعد الانتهاء من جميع الاختيارات، سيبدأ البرنامج في تحميل وتثبيت جميع الحزم الضرورية التي تحتاجها لبناء تطبيقك. هذا يتضمن مكتبة React، وأدوات Next.js، وأي مكتبات إضافية اخترت تثبيتها مثل Tailwind CSS.
cd my-next-app
بدء المشروع: بعد اكتمال التثبيت، ستحتاج إلى الدخول إلى مجلد المشروع باستخدام cd my-next-app. ثم يمكنك تشغيل خادم التطوير باستخدام npm run dev. هذا الخادم يعمل على جهازك المحلي ويتيح لك رؤية التغييرات التي تجريها على الشيفرة البرمجية فورًا عبر المتصفح في http://localhost:3000/.
npm run dev
