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.

بُنيت Next.js على مفهوم الصفحات، والصفحة هي مكوّن رياكت React Component يُصدَّر من ملفات موجودة في المجلد pages تحمل إحدى الامتدادات التالية js. أو jsx. أو ts. أو tsx.. بإمكانك أيضًا إضافة معاملات المسارات الديناميكية مع اسم الملف.

ضع الملف index.js في المجلد pages حتى تبدأ العمل، فهي الصفحة التي يعرضها المتصفح عند زيارة المجلد الجذري لتطبيقك. وطّن الصفحة pages/index.js (اجعلها الصفحة الرئيسية) بإضافة المحتوى التالي لها:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

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

• نفّذ أحد الأوامر التالية لتشغّل خادم التطوير على العنوان http://localhost:3000 :
  • npm run dev
  • yarn dev
  • pnpm dev
• زر العنوان http://localhost:3000 لاستعراض تطبيقك
• عدّل في الصفحة pages/index.js لترى النتيجة مباشرة على متصفحك.

ما فعلناه حتى اللحظة:

• تصريف compiling و تجميع bundling تلقائي.
• تهيئة التحديث السريع لرياكت React Fast Refresh.
• تقديم الملفات الثابتة Static file serving من خلال المسار public/ المرتبط بالعنوان الجذري (/).

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