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

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

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

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

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

• كيفية تثبيت Node.js
• كيفية تحديث Node.js
• مقدمة لمدير الحزم npm
• قذائف يونكس تعليمي
• كيفية استخدام محطة macOS
• شل باش

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

mkdir nextjs
cd nextjs

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

mkdir firstproject
cd firstproject

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

npm init -y

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

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

npm install next react react-dom

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

• package.json(انظر البرنامج التعليمي الخاص بي عليه)
• package-lock.json(انظر البرنامج التعليمي الخاص بي حول قفل الحزمة)

و ال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 ، والتي سنستخدمها قريبًا.

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

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

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

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

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

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

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

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

• الابتداء مع Next.js
• Next.js vs Gatsby vs create-response-app
• كيفية تثبيت Next.js
• ربط صفحتين في Next.js باستخدام Link
• محتوى ديناميكي في Next.js مع جهاز التوجيه
• قم بتغذية البيانات إلى مكون Next.js باستخدام getInitialProps
• تنميط مكونات Next.js باستخدام CSS
• الجلب المسبق للمحتوى في Next.js
• استخدام جهاز التوجيه لاكتشاف الارتباط النشط في Next.js
• اعرض المصدر لتأكيد عمل SSR في Next.js
• Next.js: ملء علامة الرأس بالعلامات المخصصة
• نشر تطبيق Next.js على الآن
• Next.js: قم بتشغيل التعليمات البرمجية فقط على جانب الخادم أو جانب العميل في Next.js
• نشر تطبيق Next.js في الإنتاج
• كيفية تحليل حزم تطبيقات Next.js
• وحدات التحميل الكسولة في Next.js
• إضافة مكون غلاف إلى تطبيق Next.js الخاص بك
• الرموز التي أضافها Next.js إلى تطبيقك
• حزم تطبيقات Next.js
• كيفية استخدام جهاز التوجيه Next.js
• كيفية استخدام مسارات Next.js API
• كيفية الحصول على ملفات تعريف الارتباط من جانب الخادم في تطبيق Next.js
• كيفية تغيير منفذ تطبيق Next.js