إعداد المشروع وCLI
تعلّم كيفية تهيئة مشروع Next.js 15 جديد والتنقّل في بنية المشروع الأساسية باستخدام واجهة سطر الأوامر
إعداد المشروع وCLI درس مجاني في Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack (App Router + Server Actions)، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 4 دروس في المجموع.
Next.js 15: خطوتك الأولى
مرحباً بك في Next.js 15 — إطار عمل React للتطبيقات السريعة والقابلة للتوسع والجاهزة للإنتاج. لنبدأ أولاً: بإنشاء مشروع وقراءة هيكله من واجهة سطر الأوامر (CLI).
ما ستحتاجه
قبل البدء، ستحتاج إلى Node.js 18.17 أو إصدار أحدث — فهو يوفر بيئة تشغيل JavaScript، كما يقوم مدير الحزم الخاص به (npm أو Yarn أو pnpm) بتثبيت تبعياتك.
تهيئة مشروعك
ابدأ مشروعاً جديداً باستخدام create-next-app — فهي تقوم بإنشاء كل شيء لك. فقط قم بتشغيل هذا الأمر في محطتك الطرفية (terminal).
npx create-next-app@latestشرح موجهات الإعداد
يطرح واجهة سطر الأوامر (CLI) بضعة أسئلة. السؤال المهم هو: اختر نعم لـ App Router — فهذا ضروري لإصدار Next.js 15. أما ESLint وTailwind فهما إضافتان مفيدتان، بينما يعد TypeScript اختيارياً.
التنقل في مشروعك الجديد
عندما ينتهي، تحصل على مجلد مشروع جديد. انتقل إليه باستخدام cd وستكون جاهزاً للعمل.
cd my-next-appهيكل مشروعك
تعرف على الملفات الأساسية المُولدة: app/ يحتوي على صفحاتك وتخطيطاتك، public/ للملفات الثابتة، package.json لتبعياتك ونصوصك البرمجية، و next.config.js للإعدادات.
مجلد <code>app</code> الأساسي
يتحكم مجلد app/ في موجه التطبيقات (App Router): الملف layout.js لواجهة المستخدم المشتركة، الملف page.js للعرض الفريد للمسار، والملف globals.css للأنماط العامة.
سكريبتات المشروع و `npm run dev`
توجد سكربتاتك في ملف package.json. السكربت الذي ستستخدمه باستمرار هو npm run dev — فهو يبدأ خادم التطوير.
npm run devأهلاً Next.js!
عندما يكون خادم التطوير يعمل، افتح localhost:3000 لترى تطبيقك. يتم عرض هذه الصفحة بواسطة app/page.js — وإليك نسخة مبسطة منها.
export default function Home() {
return (
<main>
<h1>Hello CoddyKit!</h1>
</main>
);
}اختبار سريع: أساسيات الإعداد
لقد تعلمت كيفية بدء مشروع Next.js. دعنا نختبر معلوماتك!
ملخص: خطواتك الأولى في Next.js
ملخص: لقد قمت بإعداد Next.js 15 باستخدام create-next-app، واستكشفت مجلد app/، وشغّلت خادم التطوير. التالي: التوجيه القائم على نظام الملفات.
الأسئلة الشائعة
هل درس «إعداد المشروع وCLI» مجاني؟
نعم — نص درس «إعداد المشروع وCLI» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack (App Router + Server Actions)، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 4 دروس في المجموع.
ماذا ستتعلم في «إعداد المشروع وCLI»؟
تعلّم كيفية تهيئة مشروع Next.js 15 جديد والتنقّل في بنية المشروع الأساسية باستخدام واجهة سطر الأوامر تتمرن على Next.js 15 Fullstack (App Router + Server Actions) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack (App Router + Server Actions)؟
لا تُشترط خبرة سابقة. Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «إعداد المشروع وCLI»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack (App Router + Server Actions) هذا؟
نعم. كل درس في Next.js 15 Fullstack (App Router + Server Actions) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد المشروع وCLI
- أساسيات التوجيه المعتمد على نظام الملفات
- نظرة عامة على الصفحات والتخطيطات
- تنسيق تطبيق Next.js الخاص بك