Next.js

البدء مع Next.js

مرحبًا بك إلى توثيقات Next.js باللغة العربية!

متطلبات النظام:

• حزمة Node.js نسختها 12.22.0 أو أعلى
• نظام تشغيل ماك أو ويندوز (بما في ذلك منظومة ويندوز الفرعية لدعم لينكس WSL) أو لينكس.

التثبيت التلقائي لإطار عمل Next.js

من الأفضل أن تُنشئ تطبيقًا جديدًا باستخدام create-next-app وستثبت هذه العملية كل ما تحتاجه تلقائيًا. لإنشاء تطبيق جديد في Next.js، اكتب التعليمات التالية في طرفية Node.js:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

بإمكانك استخدام الراية typescript-- إن أردت ان تبدأ بمشروع TypeScript:

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --typescript

عند اكتمال التثبيت:

• شغل خادم التطوير على العنوان http://localhost:3000 مستخدمًا إحدى التعليمات التالية:
  • npm run dev
  • yarn dev
  • pnpm dev

• زر العنوان السابق للاطلاع على تطبيقك.
• عدّل الصفحة pages/index.js وراقب نتيجة ما فعلته في المتصفح.

لمزيد من المعلومات حول create-next-app، حاول الإطلاع على التوثيقات الخاصة به.

التثبيت اليدوي

ثبت next و react و react-dom في مشروعك كالتالي:

npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom

افتح الملف package.json ثم أضف الشيفرة التالية:

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

تشير هذه الشيفرة إلى المراحل المختلفة لتطوير التطبيق:

• dev : ينفذ الأمر next dev للعمل مع Next.js في نمط التطوير.
• build: ينفذ الأمر next build لبناء تطبيق يعمل في نمط الإنتاج.
• start: ينفذ الأمر next start لتشغيل خادم إنتاج Next.js.
• lint: ينفذ الأمر next lint لتهيئة مدقق ESLint المدمج مع Next.js.

أنشئ بعد ذلك مجلدين الأول يحمل الاسم pages والآخر public ضمن الملف الجذري لتطبيقك:

• pages: ويمثل جذرًا لعناوبن الملفات التي يضمها، إذ يقترن المسار pages/about.js مثلًا بالمسار /about.
• public: يخزّن موارد الدعم كالصور وخطوط الكتابة وغيرها. يمكن الإشارة إلى الملفات الموجودة ضمن هذا المجلد انطلاقًا من العنوان الجذري / تمامًا كالملفات الموجودة ضمن pages.