البدء

إنشاء مشروع جديد

نوصي باستخدام pnpm كمدير للحزم، لأنه أسرع وأكثر كفاءة من npm أو yarn. إذا لم يكن لديك pnpm مثبتًا، يمكنك تثبيته عالميًا عن طريق تنفيذ:

npm install -g pnpm

لإنشاء تطبيق Next.js، افتح طرفيتك، انتقل cd إلى المجلد الذي ترغب في حفظ مشروعك فيه، ثم نفذ الأمر التالي:

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

يستخدم هذا الأمر create-next-app، وهي أداة واجهة سطر الأوامر (CLI) تقوم بإعداد تطبيق Next.js لك. في الأمر أعلاه، أنت تستخدم أيضًا علم --example مع المثال المبدئي لهذه الدورة.

استكشاف المشروع

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

هدفنا هو مساعدتك في التركيز على تعلم الميزات الرئيسية لـ Next.js، دون الحاجة إلى كتابة كل كود التطبيق.

بعد التثبيت، افتح المشروع في محرر الأكواد الخاص بك وانتقل إلى nextjs-dashboard.

cd nextjs-dashboard

لنقضي بعض الوقت في استكشاف المشروع.

هيكل المجلدات

ستلاحظ أن المشروع لديه هيكل المجلدات التالي:

• /app: يحتوي على جميع المسارات والمكونات والمنطق لتطبيقك، هذا هو المكان الذي ستعمل منه غالبًا.
• /app/lib: يحتوي على الدوال المستخدمة في تطبيقك، مثل دوال الأدوات القابلة لإعادة الاستخدام ودوال جلب البيانات.
• /app/ui: يحتوي على جميع مكونات واجهة المستخدم لتطبيقك، مثل البطاقات والجداول والنماذج. لتوفير الوقت، قمنا بتصميم هذه المكونات مسبقًا لك.
• /public: يحتوي على جميع الأصول الثابتة لتطبيقك، مثل الصور.
• ملفات التكوين: ستلاحظ أيضًا ملفات تكوين مثل next.config.ts في جذر تطبيقك. معظم هذه الملفات يتم إنشاؤها وتكوينها مسبقًا عند بدء مشروع جديد باستخدام create-next-app. لن تحتاج إلى تعديلها في هذه الدورة.

لا تتردد في استكشاف هذه المجلدات، ولا تقلق إذا لم تفهم كل ما يفعله الكود بعد.

بيانات نائبة

عندما تقوم ببناء واجهات المستخدم، من المفيد أن يكون لديك بعض البيانات النائبة. إذا لم يكن قاعدة البيانات أو واجهة برمجة التطبيقات (API) متاحة بعد، يمكنك:

• استخدام بيانات نائبة بتنسيق JSON أو ككائنات JavaScript.
• استخدام خدمة خارجية مثل mockAPI.

لهذا المشروع، قمنا بتوفير بعض البيانات النائبة في app/lib/placeholder-data.ts. كل كائن JavaScript في الملف يمثل جدولاً في قاعدة البيانات الخاصة بك. على سبيل المثال، لجدول الفواتير:

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

في فصل إعداد قاعدة البيانات، ستستخدم هذه البيانات لـ بذر قاعدة البيانات (ملؤها ببعض البيانات الأولية).

TypeScript

قد تلاحظ أيضًا أن معظم الملفات لها لاحقة .ts أو .tsx. هذا لأن المشروع مكتوب بـ TypeScript. أردنا إنشاء دورة تعكس مشهد الويب الحديث.

لا بأس إذا كنت لا تعرف TypeScript - سنوفر مقاطع كود TypeScript عند الحاجة.

في الوقت الحالي، ألق نظرة على ملف /app/lib/definitions.ts. هنا، نحدد يدويًا الأنواع التي سيتم إرجاعها من قاعدة البيانات. على سبيل المثال، جدول الفواتير لديه الأنواع التالية:

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // في TypeScript، هذا يسمى نوع اتحاد سلسلة.
  // يعني أن خاصية "status" يمكن أن تكون واحدة فقط من السلسلتين: 'pending' أو 'paid'.
  status: 'pending' | 'paid';
};

باستخدام TypeScript، يمكنك التأكد من أنك لن تمرر عن طريق الخطأ تنسيق بيانات خاطئ إلى مكوناتك أو قاعدة البيانات، مثل تمرير string بدلاً من number إلى amount الفاتورة.

إذا كنت مطور TypeScript:

• نحن نعلن أنواع البيانات يدويًا، ولكن لمزيد من الأمان النوعي، نوصي بـ Prisma أو Drizzle، والتي تولد الأنواع تلقائيًا بناءً على مخطط قاعدة البيانات الخاصة بك.
• يكتشف Next.js إذا كان مشروعك يستخدم TypeScript ويقوم تلقائيًا بتثبيت الحزم والتكوين اللازم. يأتي Next.js أيضًا مع ملحق TypeScript لمحرر الأكواد الخاص بك، للمساعدة في الإكمال التلقائي والأمان النوعي.

تشغيل خادم التطوير

نفذ pnpm i لتثبيت حزم المشروع.

pnpm i

ثم نفذ pnpm dev لبدء خادم التطوير.

pnpm dev

يبدأ pnpm dev خادم تطوير Next.js الخاص بك على المنفذ 3000. دعنا نتحقق مما إذا كان يعمل.

افتح http://localhost:3000 في متصفحك. يجب أن تبدو صفحتك الرئيسية هكذا، وهي غير مصممة عن قصد: