الدرس الأول: مقدمة إلى Next.js وإعداد البيئة

ما هو Next.js؟

Next.js هو إطار عمل (Framework) مفتوح المصدر لبناء تطبيقات الويب باستخدام React.js. تم تصميمه بواسطة شركة Vercel، ويهدف إلى تسهيل بناء تطبيقات ويب حديثة ومتطورة مع دعم خصائص مثل التحميل السريع للصفحات، والتحسين لأداء SEO، ودعم SSR (Server-Side Rendering)، وSSG (Static Site Generation).

المزايا الرئيسية لـ Next.js:

1. SSR (Server-Side Rendering): يتيح لك تقديم الصفحات من الخادم مباشرة، مما يحسن أداء محركات البحث.
2. SSG (Static Site Generation): يسمح بإنشاء صفحات ثابتة عند بناء التطبيق، مما يجعلها سريعة للغاية.
3. تخصيص URL تلقائيًا: يمكنك إنشاء صفحات بناءً على هيكل الملفات.
4. CSS-in-JS: يوفر أدوات مدمجة لإدارة الأنماط.
5. API Routes: يمكنك إنشاء APIs داخل مشروعك دون الحاجة إلى خادم منفصل.
6. تحسين الأداء: يحتوي على ميزات مثل Code Splitting وAutomatic Image Optimization.

لماذا يجب أن تتعلم Next.js؟

• إذا كنت ترغب في بناء تطبيقات ويب حديثة وسريعة، فإن Next.js هو الخيار المثالي.
• يساعدك على تحسين تجربة المستخدم وأداء محركات البحث.
• يتم استخدامه على نطاق واسع في الشركات الكبيرة مثل Netflix، TikTok، وTwitter.
• يوفر لك أدوات قوية لتوفير الوقت والجهد أثناء التطوير.

إعداد بيئة العمل

الخطوة 1: تثبيت Node.js وNPM

قبل البدء في تعلم Next.js، تحتاج إلى تثبيت Node.js وNPM (Node Package Manager) على جهازك. يمكنك تنزيل Node.js من الرابط التالي: https://nodejs.org/

للتأكد من تثبيت Node.js وNPM، افتح Terminal أو Command Prompt وقم بتشغيل الأوامر التالية:

node -v
npm -v

إذا ظهرت الإصدارات، فهذا يعني أن Node.js وNPM قد تم تثبيتهما بنجاح.

الخطوة 2: إنشاء مشروع Next.js جديد

لإنشاء مشروع Next.js جديد، استخدم الأمر التالي:

npx create-next-app@latest my-next-app

• my-next-app هو اسم المشروع. يمكنك تغييره إلى أي اسم تريده.
• بعد تشغيل الأمر، سيتم إنشاء مجلد المشروع وتنزيل جميع الاعتمادات اللازمة.

الخطوة 3: الدخول إلى مجلد المشروع

بعد إنشاء المشروع، انتقل إلى مجلد المشروع باستخدام الأمر:

cd my-next-app

الخطوة 4: تشغيل المشروع

لتشغيل المشروع المحلي، استخدم الأمر التالي:

npm run dev

سيتم تشغيل الخادم على العنوان التالي: http://localhost:3000

فهم الهيكل الأساسي للمشروع

بعد تشغيل المشروع، دعنا نلقي نظرة على الهيكل الأساسي للمشروع:

1. pages/: تحتوي على ملفات الصفحات. كل ملف في هذا المجلد يمثل صفحة في تطبيقك.
2. public/: يحتوي على الملفات الثابتة مثل الصور والملفات الأخرى التي يمكن الوصول إليها مباشرة.
3. styles/: يحتوي على ملفات الأنماط (CSS).
4. next.config.js: ملف التكوين الأساسي لمشروع Next.js.

تجربة التعديل على المشروع

افتح ملف pages/index.js الموجود في مشروعك. هذا هو الملف الذي يعرض الصفحة الرئيسية. يمكنك تعديل النص الموجود فيه لرؤية التغييرات مباشرة.

على سبيل المثال، قم بتغيير الكود إلى:

export default function Home() {
return (
<div>
<h1>مرحبًا بك في تعلم Next.js!</h1>
<p>هذه هي الصفحة الرئيسية.</p>
</div>
);
}

بعد الحفظ، ستلاحظ أن التغييرات تظهر مباشرة في المتصفح بسبب الميزة الرائعة "Hot Reloading".

ختام الدرس الأول

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

إلى اللقاء في الدرس الثاني! 🚀