تثبيت Next.js وإعداده

في هذا الدرس، سنقوم بتثبيت Next.js وإعداد بيئة تطوير مثالية لإنشاء تطبيقات ويب حديثة.

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

قبل البدء، تأكد من توفر ما يلي:

• Node.js 16.8 أو إصدار أحدث
• npm أو yarn أو pnpm كمدير للحزم
• محرر أكواد (يُوصى باستخدام VS Code)

التحقق من Node.js

node --version
npm --version

إذا لم يكن Node.js مثبتًا، فقم بتنزيله من nodejs.org.

طرق التثبيت

1. Create Next App (الطريقة الموصى بها)

أبسط طريقة للبدء:

npx create-next-app@latest mon-app-nextjs
cd mon-app-nextjs
npm run dev

2. التثبيت مع TypeScript

لمشروع يعتمد على TypeScript منذ البداية:

npx create-next-app@latest mon-app-nextjs --typescript
cd mon-app-nextjs
npm run dev

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

لمزيد من التحكم في الإعداد:

mkdir mon-app-nextjs
cd mon-app-nextjs
npm init -y
npm install next react react-dom

أضف السكريبتات في الملف package.json:

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

الإعداد الأولي

بنية المشروع

بعد التثبيت، يبدو مشروعك على النحو التالي: