السلام عليكم
في هذا الثريد سنتعرف على Next.js وسنتعرف على خصائصة ومميزاته واستخداماته .
@programmingwa @Alansaricodez
في هذا الثريد سنتعرف على Next.js وسنتعرف على خصائصة ومميزاته واستخداماته .
@programmingwa @Alansaricodez
لكن قبل ذالك , اذا كنت مهتم بمجال البرمجة بصفة عامة او بمجال برمجة المواقع والتطبيقات بصفة خاصة فا فضلا لا تنسى تعملي فولو @capsuleprog لكي يصلك جديد ثريداتي القادمة , ولا تنسى متابعة حسابي الشخصي @simo_el48 .
ما هو Next.js
ال Next.js هو اطار عمل React.js مبني على Javascript g لتطوير تطبيقات الويب ذات الصفحة الواحدة SPA , اذا كنت مطور Javascript و React.js فيمكنك تعلم Next.js بسهولة والاستمتاع بمزياه الكثيرة , يتميز اطار Next.js بالسرعة الفائقة وقدم لنا تطبيقات ويب باداء عالي جدا .
ال Next.js هو اطار عمل React.js مبني على Javascript g لتطوير تطبيقات الويب ذات الصفحة الواحدة SPA , اذا كنت مطور Javascript و React.js فيمكنك تعلم Next.js بسهولة والاستمتاع بمزياه الكثيرة , يتميز اطار Next.js بالسرعة الفائقة وقدم لنا تطبيقات ويب باداء عالي جدا .
خصائص Next.js
من خصائص Next.js هو Code Splitting حيت يتم تقسيم الكود تلقائيا بواسطة هذه الاداة وتقوم بتنضيم الكود .
عندا انشاء Components في اي اطار عمل فانه يتم انشاء 3 ملفات ملف html و ملف css و ملف Javascript وعند عمل Build للمشروع يتم الاحتفاض بالملفات الثلات
من خصائص Next.js هو Code Splitting حيت يتم تقسيم الكود تلقائيا بواسطة هذه الاداة وتقوم بتنضيم الكود .
عندا انشاء Components في اي اطار عمل فانه يتم انشاء 3 ملفات ملف html و ملف css و ملف Javascript وعند عمل Build للمشروع يتم الاحتفاض بالملفات الثلات
حتى ولم هو فارغون مثلا في اطر العمل يتم الاعتماد على اطر للتنسيق مثل Bootstrap و غيرها ويكون ملف css في ال components فارغ , في Next.js عند عمل Build للمشروع يتم االاستغناء عن اي فايل او مكتبة تمت تنصيبها بدون استخدامها او اي فايل فارغ في المشروع .
يوفر لنا Next ميزة اخرى
يوفر لنا Next ميزة اخرى
وهي Styled-JSX حيت يمكننا من كتابة اكواد Css داخل Javascript .
الان اغلبكم سيطرح سؤال وهو لماذا نحتاج Next.js بوجود React.js الجواب هو ان Next.js قام بحل مشكلتين في React.js وهما :
المشكل الاول هو عندما يتم تحميل الصفحة من طرف المستخدم يجب الانتضار حتى يتم تحميل
الان اغلبكم سيطرح سؤال وهو لماذا نحتاج Next.js بوجود React.js الجواب هو ان Next.js قام بحل مشكلتين في React.js وهما :
المشكل الاول هو عندما يتم تحميل الصفحة من طرف المستخدم يجب الانتضار حتى يتم تحميل
جميع اكواد Javascript قبل ضهور اي شيء في الصفحة وهذا يجعل تحميل الصفحة بطيئ نوعا مي ويعطي تجربة سيئة للمستخدم .
المشكل الثاني هو تحسين صفحة في محركات البحث (SEO) حيت تحتاج محركات البحث على تشغيل موقعك للحصول على بيانات ثم القيام بفهرسته .
بالنسبة ل Next.js توفر لنا حلين
المشكل الثاني هو تحسين صفحة في محركات البحث (SEO) حيت تحتاج محركات البحث على تشغيل موقعك للحصول على بيانات ثم القيام بفهرسته .
بالنسبة ل Next.js توفر لنا حلين
لهذه المشكلتين , الحل الاول هو استخدام عرض جانب الخادم (SSR) وهي اختصار ل server side rendering . والحل الثاني هو استخدام موقع ثابث .
مميزات Next.js
يوفر لنا Next.js مميزات رائعة مثلا في التنسيق يوفر لنا عدة حلول مثل style-jsx و style-jsx و Sass و moooore .
مميزات Next.js
يوفر لنا Next.js مميزات رائعة مثلا في التنسيق يوفر لنا عدة حلول مثل style-jsx و style-jsx و Sass و moooore .
يوفر Next.js دعم تلقائي ل Typescript ويتم تقسيم الكود بطريقة تلقائيا حيت مثلا عندما تقوم بتحميل صفحة معينة يتم تحميل ال Javascript الخاص بتلك الصفحة فقط .
يوفر لنا Next.js ميزة غير مسبوقة في عالم Javascript في ال Routing فالتوجيه في Next.js يعتمد على الملفات مثلا عندما
يوفر لنا Next.js ميزة غير مسبوقة في عالم Javascript في ال Routing فالتوجيه في Next.js يعتمد على الملفات مثلا عندما
تقوم بانشاء ملف about.js فان ال routing الخاص به يكون تلقائيا /about .
ويوفر لنا Next.js واجهة سطر اوامر CLI لطيفة وبسيطة وسهلة الاستخدام وتمكننا من ما يلي :
امكانية تشغيل التطبيق في Devlopement Mode .
امكانية تشغيل التطبيق في Production Mode .
امكانية تحويل الموقع الخاص بك الى
ويوفر لنا Next.js واجهة سطر اوامر CLI لطيفة وبسيطة وسهلة الاستخدام وتمكننا من ما يلي :
امكانية تشغيل التطبيق في Devlopement Mode .
امكانية تشغيل التطبيق في Production Mode .
امكانية تحويل الموقع الخاص بك الى
موقع ثابث .
وغيرها من العمليات الي يمكننا انشاء عن طريق Next.js CLI.
اذا تريد تعلم next.js انصحك بهذه الدورة الجميلة .
youtube.com
وغيرها من العمليات الي يمكننا انشاء عن طريق Next.js CLI.
اذا تريد تعلم next.js انصحك بهذه الدورة الجميلة .
youtube.com
جاري تحميل الاقتراحات...