بسم الله الرحمن الرحيم والصلاة على من بعت رحمة للعالمين
سيد الأولين والأخرين سيدنا محمد صلى الله عليه وأله وسلم

أما بعد ...
إخواني أحبائي وأصدقائي أهلا بكم...

ندخل صلب الموضوع
سلام حار لكل متصفح للموضوع وكل عضو بالمنتدى

لكي ننشأ مشروعا جديد ب NextJs يمككنا كتابة الأمر الموالي في terminal 

 بعد ذلك نقوم بالإجابة عن الأسئلة الموالية، لا تقلق إن رأيت شيئا لم تعهده من قبل 

ينقوم إن شاء الله أنا و أنت بفهمه بشكل جيد مع توالي الدروس

بعد المرور على الأسئلة، ننتظر حتى التحميل ينتهي ونذخل على المجلد الذي أنشأناه

 ثم نفتح المشروع عن طريق Vscode

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

مجلد "app" في Next.js يستخدم لتنظيم ملفات التطبيق ومكوناته بطريقة منظمة.

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

بشكل عام، يُستخدم مجلد "app" لتنظيم وتجميع جميع أجزاء التطبيق في مكان واحد لسهولة الوصول والصيانة. 

 و الذي سيكون معظم العمل فيه حيث هو الذي سيحتوي على صفحات الموقع الذي سنقوم بالتعلم عليه

---------------------------------------------------

مجلد node_modules هو المجلد الذي يحتوي على جميع المكتبات والموديولات التي يتم تثبيتها باستخدام مدير الحزم npm أو yarn في مشروع Node.js.

يتم توليد هذا المجلد تلقائيًا عند تثبيت المكتبات المعرفة في ملف package.json الخاص بالمشروع.

يُستخدم مجلد node_modules لتخزين وإدارة جميع المكتبات المستخدمة في المشروع،

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

 -----------------------------------

مجلد "public" في Next.js يستخدم لتخزين الملفات الثابتة التي يتم تضمينها مباشرة في تطبيق Next.js.

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

يتم نسخ محتويات مجلد "public" تلقائيًا إلى مجلد الإنتاج عند بناء التطبيق، مما يجعلها متاحة للاستخدام من قبل العملاء بشكل مباشر دون الحاجة إلى معالجة خاصة من قبل الخادم.

-------------------------------------------------------

ملف eslintrc.json هو ملف يُستخدم في تكوين أداة Eslint لتحديد القواعد والإعدادات المستخدمة في فحص وتنسيق وتحسين جودة الكود في مشروع J a v.a.S c r i p t.

يحتوي هذا الملف عادةً على مجموعة من القواعد المحددة والمكونات الإضافية التي يجب على Eslint اتباعها أثناء فحص الكود.

يُستخدم eslintrc.json لتكوين القواعد بما يتناسب مع متطلبات المشروع وأسلوب البرمجة المحدد من قبل الفريق.

----------------------------------------------------

ملف gitignore هو ملف يستخدم لتحديد الملفات والمجلدات التي لا يجب تتبعها أو تخزينها في نظام التحكم بالإصدارات Git.

يتم استخدامه لتجنب تتبع الملفات المؤقتة أو الملفات التي ليست ذات أهمية في التطوير،

مثل ملفات التكوين المحلية أو ملفات المكتبات المستخدمة في المشروع. من خلال تحديد هذه الملفات في gitignore،

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

---------------------------------------------------------

  ملف next-env.d.ts يستخدم في تطبيقات Next.js لتعريف أنواع البيانات الخاصة بالبيئة والمتغيرات البيئية.

يساعد هذا الملف في توفير تعريفات T y p e S c r i p t للمتغيرات البيئية المستخدمة في التطبيق، مما يسهل على المطورين استخدامها بشكل صحيح وتجنب الأخطاء الشائعة.

بشكل عام، فإن ملف next-env.d.ts يعزز دقة وقوة تحليل النوع في التطبيقات التي تستخدم T y p e S c r i p t مع Next.js.

-----------------------------------------

ملف next.config.js في Next.js يستخدم لتكوين وتخصيص التطبيق.

يمكن استخدامه لتعيين الإعدادات العامة للتطبيق مثل مسارات الإدخال والمخرجات، والمتغيرات البيئية، والتكوينات الخاصة بالخادم،وأكثر من ذلك.

ببساطة، يسمح ملف next.config.js للمطورين بتخصيص وتهيئة تطبيق Next.js بحسب احتياجات مشروعهم الخاصة.

--------------------------------------------------

ملف package-lock.json في Next.js يُستخدم لتثبيت إصدارات محددة من جميع المكتبات المعتمدة في المشروع.

يحتوي هذا الملف على قائمة بجميع المكتبات المثبتة، بما في ذلك إصداراتها المحددة بشكل دقيق والتبعيات الخاصة بها.

يُستخدم package-lock.json لضمان تثبيت إصدارات متسقة من المكتبات عبر فرق التطوير والإنتاج،

مما يضمن أن يتم استخدام نفس الإصدارات في جميع أجهزة التطوير والنشر.

----------------------------------------------------

ملف package.json في Next.js يُستخدم لتعريف وإدارة تبعيات المشروع وتكويناته.

يحتوي هذا الملف على معلومات حول الإصدارات المستخدمة لمكتبات Ja va Sc ri pt المختلفة،

بالإضافة إلى الأوامر اللازمة لتشغيل التطبيق وإعدادات البيئة وغيرها من التكوينات الضرورية.

يُعتبر ملف package.json جزءًا أساسيًا من منهجية تطوير التطبيقات في Next.js، حيث يُستخدم لتنظيم وإدارة تبعيات المشروع وتحديد البيانات الأساسية للتطبيق.

------------------------------------------

ملف "postcs.config" في Next.js يستخدم لتكوين PostCSS، وهو أداة تستخدم لمعالجة وتحسين CSS في تطبيق Next.js.

يحتوي هذا الملف على الإعدادات والتكوينات الخاصة بـ PostCSS، مثل الـ plugins والـ presets المستخدمة لتحسين وتعديل CSS.

يمكن استخدام ملف "postcss-config" لتكوين الـ autoprefixer وتحديد الميزات المدعومة من قبل المتصفحات وإضافة أي تعديلات أخرى للـ CSS بحسب احتياجات التطبيق.

------------------------------------------

ملف "tailwind.config" في Next.js يستخدم لتكوين وتخصيص إعدادات إطار العمل Tailwind CSS في مشاريع Next.js.

يحتوي هذا الملف عادةً على مجموعة من الخيارات التي يمكن تعديلها لتغيير تصميم وأسلوب المظهر الخاص بالتطبيق.

على سبيل المثال، يمكن تعيين الألوان الأساسية، وتكوين المتغيرات، وتعريف المكونات المخصصة، وتفعيل أو تعطيل الميزات المحددة في Tailwind CSS.

بوجود هذا الملف، يمكن للمطورين تخصيص تجربة التصميم وفقًا لاحتياجات مشروع Next.js الخاص بهم بسهولة.

-------------------------------------------------------------------------

ملف "tsconfig.json" في Next.js يستخدم لتكوين إعدادات Type--SS-- لمشروع Next.js.

يحتوي هذا الملف على مجموعة من الخيارات والإعدادات التي تحدد كيفية ترجمة وتحليل ملفات الكود T y p e S c r i p t في المشروع.

من خلال "tsconfig.json"، يمكن تحديد الإعدادات مثل نسخة T y p e S c r i p t المستخدمة، ومسارات الملفات، وخيارات الترجمة، والإعدادات الخاصة بتحسين الأداء والجودة.

يساعد "tsconfig.json" في توفير إعدادات مخصصة لتطوير تطبيقات Next.js باستخدام T y p e S c r i p t بطريقة فعالة ومنظمة.

------------------------------------------------------------------

و أخيرا أنهينا شرح الملفات و المجلدات

نعود إلى terminal و نكتب الأمر الموالي لكي نشغل السرفر المحلي و نرى المشروع

بعد هنيهة تطلع هذه الرسالة ثم نضغك على ctrl في الكيبورد ثم ننقر عليها بالماوس 

ترااااا النتيجة كما تشاهدون موقع خايس سنقوم بمعالجته و تحسينه وإرجاعه موقعا محترما. 

أي سؤال أو إستفسار لا تتردد في وضعه

  ستجدون هنا شرح الفرق بين ESLint و Prettier

 ستجدون طريقة إضافة ESLint و Prettier و دمجهما معا للحصول على أفضل النتائج

 رفع المشروع على ال GitHub ثم تعديل ملفات TailwindCss للحصول على استايل جميل لمشروع