كيفية تثبيت Next.js

إرشادات خطوة بخطوة لبدء استخدام Next.js

لتثبيت Next.js ، يجب أن يكون لديكNode.jsالمثبتة.

تأكد من أن لديك أحدث إصدار من Node. تحقق مع الجريnode -vفي جهازك الطرفي ، وقارنه بأحدث إصدار LTS مدرج فيhttps://nodejs.org/.

بعد تثبيت Node.js ، سيكون لديك ملفnpmالأمر متاح في سطر الأوامر الخاص بك.

إذا كنت تواجه أي مشكلة في هذه المرحلة ، فإنني أوصي بالدروس التالية التي كتبتها لك:

الآن بعد أن تم تحديث Node إلى أحدث إصدار وnpm، قم بإنشاء مجلد فارغ في أي مكان تريد ، على سبيل المثال في المجلد الرئيسي الخاص بك ، وانتقل إليه:

mkdir nextjs
cd nextjs

وأنشئ مشروعك الأول التالي

mkdir firstproject
cd firstproject

الآن استخدم ملفnpmالأمر لتهيئته كمشروع عقدة:

npm init -y

ال-yيقول الخيارnpmلاستخدام الإعدادات الافتراضية لمشروع ما ، ملء عينةpackage.jsonملف.

npm init result

الآن قم بتثبيت Next و React:

npm install next react react-dom

يجب أن يحتوي مجلد مشروعك الآن على ملفين:

و الnode_modulesمجلد.

افتح مجلد المشروع باستخدام المحرر المفضل لديك. المحرر المفضل لدي هوكود VS. إذا كان لديك هذا مثبتًا ، يمكنك تشغيلcode .في الجهاز الطرفي لفتح المجلد الحالي في المحرر (إذا كان الأمر لا يعمل من أجلك ، فراجعهذه)

فتحpackage.json، والذي يحتوي الآن على هذا المحتوى:

{
  "name": "airbnbclone",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies":  {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

واستبدل ملفscriptsقسم مع:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

لإضافة أوامر بناء Next.js ، والتي سنستخدمها قريبًا.

the package.json file

الآن قم بإنشاء ملفpagesالمجلد ، وأضف ملفindex.jsملف.

في هذا الملف ، لنقم بإنشاء مكون React الأول.

سنستخدمه كتصدير افتراضي:

const Index = () => (
  <div>
    <h1>Home page</h1>
  </div>
)

export default Index

الآن باستخدام المحطة ، قم بتشغيلnpm run devلبدء خادم التطوير التالي.

سيؤدي هذا إلى إتاحة التطبيق على المنفذ 3000 ، على المضيف المحلي.

npm run dev

فتحhttp://localhost:3000في متصفحك لرؤيتها.

The first Next app screen

تحميل مجانيكتيب Next.js


المزيد من البرامج التعليمية التالية: