Nextjs للجميع - مع بعض المعرفة الأساسية بـ React

مع بعض المعرفة الأساسية بـ React و JavaScript ، ستكون في طريقك

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

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

في هذه المقالة ، سوف نستكشف الميزات والحيل الرائعة لـ Next.js ، وكيفية البدء في إنشاء موقع الويب التالي الخاص بك باستخدامه.

يفترض هذا المنشور أن لديك بعض المعرفة الأساسية بـ React و JavaScript.

إليك بعض مواقع الويب الرائعة التي تم إنشاؤها باستخدام Next.js:

  • Syntaxt.fm
  • npmjs
  • material-ui.io
  • اكسبو
  • codemenitor.io

لقد استخدمت Nextjs لإنشاء موقع الويب الشخصي الخاص بي saidhayani.me - يمكنك الحصول على الكود المصدري على GitHub هنا.

البدء بـ Next.js

للبدء بـ Next.js ، يجب أن يكون لديك node.js مثبتًا في جهازك وهذا كل شيء. Next.js مثل أي تطبيق node.js آخر - تحتاج إلى npm أو Yarn لتثبيت التبعيات.

لنبدأ وننشئ مشروع Next.js.

أولاً ، نحتاج إلى إنشاء مجلد وإعطائه اسمًا نختاره. سأقوم بتسميته nextjs-app.

يمكنك القيام بذلك بسهولة باستخدام سطر الأوامر هذا:

mkdir nextjs-app

بعد إنشاء مجلد nextjs-app ، افتحه على الجهاز. قم بتشغيل npm init لإنشاء package.json الملف.

بعد ذلك ، علينا تثبيت تبعياتنا.

تثبيت Next.js

  • باستخدام الغزل ، اكتب
yarn add next
  • باستخدام npm ، اكتب:
npm i next --save

ثم يتعين علينا تثبيت React لأن Next.js يستخدم React. يستخدم السطر الأول أدناه الغزل للتثبيت.

yarn add react react-dom
// with npm
npm i react react-dom --save

بعد ذلك عليك إنشاء مجلدين ضروريين: pagesو static. Next.js لن يعمل بدونهم !!

mkdir pages static

هل يجب أن يكون هذا الهيكل بعد تشغيل هذه الأوامر:

nextjs-app -pages -static -package.json

وبعد ذلك يمكنك تشغيله npm next devثم فتحه //localhost:3000/ في متصفحك.

على NotFoundالصفحة سوف تظهر لأننا لم يكن لديك أي صفحة بعد!

لذلك دعونا ننشئ homeصفحة ونقطة دخول index.js.

touch index.js home.js

وبعد ذلك يمكنك كتابة مكون React عادي. كما قلت أعلاه ، يعد Next.js لبناء تطبيقات React.

هذا هو home.jsشكلنا:

وها هو index.jsملفنا:

يحتوي Next.js على ميزة إعادة التحميل المباشر. كل ما عليك فعله هو التغيير والحفظ فقط ، وسيقوم Next.js بتجميع التطبيق وإعادة تحميله تلقائيًا نيابة عنك.

ملاحظة : يعد Next.js مثل أي أداة عرض أخرى من جانب الخادم نحتاج إلى تحديد الصفحة الافتراضية لتطبيقنا ، في حالتنا index.js.

سترى هذا التغيير في المتصفح بعد التشغيل npm next dev:

تهانينا! لقد أنشأنا للتو تطبيق Next.js ببضع خطوات بسيطة. هذه التعليمات الخاصة بإنشاء تطبيق Next.js موصوفة في المستندات الرسمية لـ Next.js.

بديلي

أنا عادة لا أستخدم هذه الطريقة. أستخدم CLI create-next-app بدلاً من ذلك والذي سيفعل كل هذه الأشياء لي في سطر واحد.

npx create-next-app my-app

يمكنك التحقق من الوثائق هنا لاستكشاف المزيد من الميزات.

قم بإنشاء تكوينات مخصصة لـ Next.js

قد ترغب أحيانًا في إضافة بعض التبعيات أو الحزم الإضافية إلى تطبيق Next.js الخاص بك.

يمنحك Next.js خيار تخصيص التكوين الخاص بك باستخدام next-config.jsملف.

على سبيل المثال ، قد ترغب في إضافة دعم sass إلى تطبيقك. في هذه الحالة لديك لاستخدام حزمة المقبل من ساس و لديك لإضافته إلى next-config.jsالملف كما في المثال التالي:

أولاً ، قم بتثبيت next-sass:

yarn add @zeit/next-sass

ثم قم بتضمينه داخل next-config.jsالملف:

وبعد ذلك يمكنك إنشاء كتابة كود sass الخاص بك واستيراده في المكون الخاص بك:

استيراد ملف sass في المكون الخاص بنا:

وها هي النتيجة:

رائع ، ألم يكن من السهل جدًا إضافة دعم sass إلى تطبيق Next.js؟

في هذه المرحلة ، قمنا بتغطية جزء التثبيت والتكوين. الآن دعنا نتحدث عن ميزات Next.js!

المميزات

يأتي Next.js مع مجموعة من الميزات الرائعة مثل العرض من جانب الخادم وأجهزة التوجيه والتحميل البطيء.

التقديم من جانب الخادم

يقوم Next.js بإجراء العرض من جانب الخادم افتراضيًا. هذا يجعل التطبيق الخاص بك الأمثل لمحركات البحث. يمكنك أيضًا دمج أي برمجيات وسيطة مثل express.js أو Hapi.js ، ويمكنك تشغيل أي قاعدة بيانات مثل MongoDB أو MySQL.

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

ويمكنك استيراد Headالمكون واستخدامه في أي صفحة أخرى:

رائع!

ملاحظة : مع Next.js ، لن تحتاج إلى استيراد React لأن Next.js يقوم بذلك نيابة عنك.

إنشاء موقع ويب ثابت باستخدام Next.js

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

الموجهات

هذه ميزة أخرى من الميزات الرائعة لـ Next.js. عندما تستخدم تطبيق create-reaction-app ، فإنك تحتاج عادة إلى تثبيت جهاز التوجيه التفاعلي وإنشاء التكوين المخصص الخاص به.

يأتي Next.js مع أجهزة التوجيه الخاصة به بدون أي تكوين. لا تحتاج إلى أي تكوين إضافي لأجهزة التوجيه الخاصة بك. ما عليك pagesسوى إنشاء صفحتك داخل المجلد وسيتولى Next.js جميع إعدادات التوجيه.

دعنا نمضي قدمًا وننشئ التنقل المخصص لتوضيح كل شيء!

للتنقل بين الصفحات ، يحتوي Next.js على Linkطريقة لإدارة التنقل.

دعونا خلق blog.jsو contact.jsالصفحات:

blog.js

وهنا contact.jsالصفحة:

والآن يجب أن نكون قادرين على التنقل بين تلك الصفحات؟

واو هذا سهل جدا ورائع جدا.

تحميل كسول

التحميل البطيء يجعل تطبيقك يقدم تجربة مستخدم أفضل. في بعض الأحيان قد يستغرق تحميل الصفحة بعض الوقت. قد يتخلى المستخدم عن تطبيقك إذا استغرق التحميل أكثر من 30 ثانية.

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

يأتي Next.js مع طريقة تقسيم الكود الخاصة به. يوفر لنا طريقة ، تسمى dynamic، لتحميل المكون الخاص بنا ، كما في المثال أدناه:

يمكنك العثور على الكود المصدري لهذه الأمثلة على GitHub

هذا كل شئ. آمل أن يكون هذا كافيًا وآمل أن يمنحك هذا المقال فكرة واضحة عن Next.js وميزاته. يمكنك معرفة المزيد حول الميزات الأخرى في المستندات الرسمية.

إذا كان لديك أي إضافات أخرى على هذا المنشور ، يمكنك ترك تعليق أدناه وإذا أعجبك هذا المنشور ، يرجى النقر على التصفيق؟ و شارك.

ناقش على تويتر ؟.

بالمناسبة ، لقد عملت مؤخرًا مع مجموعة قوية من مهندسي البرمجيات لأحد تطبيقات الهاتف المحمول الخاصة بي. كانت المنظمة رائعة ، وتم تسليم المنتج بسرعة كبيرة ، وأسرع بكثير من الشركات الأخرى والمستقلين الذين عملت معهم ، وأعتقد أنني أستطيع أن أوصي بهم بصدق لمشاريع أخرى هناك. أرسل لي بريدًا إلكترونيًا إذا كنت تريد الاتصال - [email protected]