Next.

js ‫دليل شامل لتعلم‬

Comprehensive Next.js Guide

1. Introduction to Next.js

- What is Next.js?

- Key Features of Next.js

- Why Choose Next.js?

2. Setting Up the Environment

- Installing Node.js and npm

- Setting Up a New Next.js Project

- Project Structure Overview

3. Core Concepts

- Pages and Routing

- Static File Serving

- API Routes

4. Styling in Next.js

- CSS and Sass Modules

- Styled Components

- Global Styles

5. Data Fetching

- getStaticProps

magdy zahran
MERN Stack Developer
 - getServerSideProps

- Incremental Static Regeneration (ISR)

6. API Routes

- Building API Endpoints

- Handling Requests and Responses

- Middleware and Custom Functions

7. Dynamic Routing

- Setting Up Dynamic Routes

- Fetching Data for Dynamic Routes

8. Middleware in Next.js

- What is Middleware?

- Using Middleware for Authentication

- Examples of Middleware Usage

9. Advanced Features

- Image Optimization

- Built-in Analytics

- Custom App and Document

10. Deployment

- Deploying on Vercel

- Deploying on Other Platforms

- Best Practices for Production

magdy zahran
MERN Stack Developer
11. Practical Projects

- Building a Blog

- Creating an E-commerce Site

- Portfolio Website with Next.js

12. Tips and Resources

- Performance Optimization

- Useful Libraries and Tool

- Community and Learning Resources

magdy zahran
MERN Stack Developer
 ‫‪.1‬ليه ‪Next.js‬؟‬
‫هو إطار عمل بيبني فوق ‪ React‬وبيوفر مزايا جبارة زي‪:‬‬

‫)‪ :Server-Side Rendering (SSR‬لتحميل أسرع للصفحات‪.‬‬

‫)‪ :Static Site Generation (SSG‬لبناء مواقع ثابتة بأداء قوي‪.‬‬

‫‪ Routing‬تلقائي‪ :‬بدون أي إضافات أو إعدادات معقدة‪.‬‬

‫‪ :API Routes‬لإنشاء واجهات ‪ API‬بسهولة من داخل نفس المشروع‪.‬‬

‫لو لسه بتستخدم ‪ React‬بس‪ ،‬فده الوقت المناسب إنك تبدأ تستخدم ‪.Next.js‬‬

‫‪ .2‬جهز بيئه العمل وابدأ أول مشروع‪:‬‬

‫مش هنعقد الأمور‪ ،‬هنبدأ خطوة بخطوة‪:‬‬

‫تثبيت ‪:Node.js‬‬

‫لو مش عندك ‪ ،Node.js‬نزله من الموقع الرسمي‪.‬‬

‫إنشاء أول مشروع‪:‬‬

‫افتح الـ ‪ Terminal‬واكتب‪:‬‬

‫ده هيجهز لك مشروع جاهز ويشغله على ‪http://localhost:3000‬‬

 ‫‪ .3‬ملفات المشروع في ‪Next.js‬‬
‫لما تبدأ مشروع ‪ Next.js‬جديد‪ ،‬هتالقي الملفات متقسمة بشكل منظم‬

‫يسهل عليك الشغل‪ ،‬ودي أهم المجلدات اللي هتقابلك‪:‬‬

‫‪ :pages‬ده المجلد الأساسي اللي بتعمل فيه صفحات الموقع‪ .‬كل ملف هنا بيتحول‬

‫تلقائًي ا لصفحة على نفس اسم الملف‪ .‬مث اًل ‪:‬‬

‫ملف ‪ index.js‬هيترجم لصفحة رئيسية ‪/‬‬

‫ملف ‪ about.js‬هيترجم لصفحة ‪/about‬‬

‫‪ :public‬أي صور أو ملفات ثابتة (‪ )Static Files‬ممكن تضيفها هنا وتستخدمها مباشرة‬

‫في المشروع‪ .‬مث اًل ‪ ،‬صورة اسمها ‪ logo.png‬ممكن توصلها كده‪:‬‬

‫‪ :styles‬مجلد لملفات ‪ .CSS‬فيه ملفات جاهزة زي ‪ globals.css‬اللي بتطبق على كل‬

‫الصفحات‪ ،‬و‪ Home.module.css‬لو عاوز تضيف استايالت مخصصة لملف معين‪.‬‬

‫‪ :node_modules‬مش بتعدل عليه‪ ،‬ده مكان حفظ جميع المكتبات اللي بتثبتها عن طريق‬

‫‪.npm‬‬

‫‪ :package.json‬ملف بيوضح كل الإعدادات الأساسية للمشروع والمكتبات المثبتة‪.‬‬

‫‪ :next.config.js‬لو احتجت تضيف إعدادات إضافية للمشروع‪ ،‬هتعملها هنا‪.‬‬

 ‫‪ .4‬أول خطوة عملية‪ :‬تعديل الصفحة الرئيسية‬
‫دلوقتي هنبدأ بأول تعديل عملي على مشروعك الجديد في ‪ .Next.js‬الهدف‬

‫هنا إنك تفهم إزاي تعدل صفحة موجودة وتشوف التغيير على طول‪:‬‬

‫افتح الملف ‪ :pages/index.js‬ده ملف الصفحة الرئيسية للمشروع‪ .‬أي حاجة هتعدلها‬

‫هنا هتظهر لما تفتح الموقع على الرابط الرئيسي ‪/‬‬

‫استبدل الكود الموجود بالتالي‪:‬‬

‫<‪ :>h1‬هتكتب فيه عنوان الصفحة‪.‬‬

‫<‪ :>p‬ده النص اللي تحت العنوان عشان تضيف رسالة ترحيب بسيطة‪.‬‬

‫افتح الرابط ‪ http://localhost:3000‬عشان تشوف الرسالة اللي عدلتها على الصفحة‬

‫الرئيسية‪.‬‬
 ‫‪ - Pages and Routing.5‬الصفحات والروتنج ️🗂‬
‫في ‪ ،Next.js‬كل فايل بتحطه في فولدر ‪ pages‬بيتحول تلقائيا لصفحة‬

‫برابط محدد بدون ما تحتاج تضيف مكتبات زي ‪ react-router‬مثال‪.‬‬

‫أنواع الروتنج في ‪:Next.js‬‬

‫‪ :File-based Routing‬لو عملت فايل اسمه ‪ about.js‬في فولدر ‪ :pages‬الصفحة‬

‫هتبقى متاحة عىل الرابط ‪about/‬‬

‫‪ :Dynamic Routing‬تقدر تعمل صفحات ديناميكية زي ‪product/[id].js/‬‬

‫لو دخلت على ‪ product/123/‬هيظهر "‪."Product ID: 123‬‬

‫‪ :Nested Routing‬تقدر تعمل فولدرات جوا فولدر ‪ pages‬عشان تنظم الصفحات‬

‫أكتر‪:‬‬
 ‫مقارنة بين أنواع الروتنج في ‪Next.js‬‬

‫الرابط الناتج‬ ‫العيوب‬ ‫المزايا‬ ‫الوصف‬ ‫النوع‬

‫أي ملف داخل فولدر‬

‫غير مرن مع‬ ‫سهل وبسيط‪.‬‬
‫‪ PAGES‬بيتحول‬ ‫‪FILE-BASED‬‬
‫‪/ABOUT‬‬ ‫الروابط‬ ‫مناسب للمواقع‬
‫لصفحة تلقائًي ا‬ ‫‪ROUTING‬‬
‫الديناميكية‪.‬‬ ‫الصغيرة‬
‫بنفس اسم الملف‪.‬‬

‫يتم استخدام‬
‫أقواس مربعة [ ]‬
‫أكثر تعقيًد ا من‬ ‫يدعم الروابط‬ ‫‪DYNAMIC‬‬
‫في أسماء الملفات‬
‫‪/PRODUCT/123‬‬ ‫‪FILE-BASED‬‬ ‫الديناميكية‪.‬‬
‫‪.ROUTING‬‬ ‫مرن للغاية‪.‬‬
‫إلنشاء روابط‬ ‫‪ROUTING‬‬
‫ديناميكية‪ ،‬مثًال‬
‫‪PRODUCT/[ID].JS/‬‬

‫يمكنك إنشاء‬
‫تنظيم أفضل‬
‫فولدرات داخل‬
‫قد يصبح‬ ‫للصفحات‪.‬‬
‫فولدر ‪PAGES‬‬ ‫‪NESTED‬‬
‫‪/ABOUT/TEAM‬‬ ‫معقًد ا مع كثرة‬ ‫مناسب‬
‫لتنظيم الصفحات‬ ‫‪ROUTING‬‬
‫الفولدرات‪.‬‬ ‫للمشاريع‬
‫وجعلها تظهر‬
‫الكبيرة‪.‬‬
‫كروابط متداخلة‪.‬‬

‫هيكل الملفات والروابط الناتجة‪:‬‬

‫الرابط الناتج لكل صفحة‪:‬‬

‫‪ about/team/‬من ملف ‪.team.js‬‬
‫‪ product/123/‬باستخدام ‪.Dynamic Routing‬‬
‫‪ contact/‬من ملف ‪.contact.js‬‬
‫‪ - Static File Serving.6‬تقديم الملفات الثابتة 📂‬
‫إزاي بتشتغل؟‬

‫أي فايل تحطه في فولدر ‪ public‬هيبقى متاح مباشرة على الـ‪.URL‬‬

‫مش محتاج تستخدم مكتبات خارجية زي ‪ file-loader‬أو تعدل إعدادات‪.‬‬

‫مثال عملي‪:‬‬

‫لو عندك صورة ‪ logo.png‬في فولدر ‪ ،public‬تقدر تعرضها كده‪:‬‬

‫تنظيم الفولدر‪:‬‬

‫لو عندك ‪ CSS‬فايل‪ ،‬تقدر تضيفه في الهيد بتاع الصفحة‪:‬‬

‫نصائح‪:‬‬
‫حط الملفات اللي مش هتتغير‬
‫كتير (زي الصور‪ ،‬األيقونات‪ ،‬أو‬
‫‪ CSS‬ثابت)‪.‬‬
‫حافظ عىل تنظيم الملفات‬
‫بفولدرات فرعية جوه ‪.public‬‬
‫‪ - API Routes .7‬إنشاء ‪ Endpoints‬داخل المشروع ️🛠‬
‫ليه الميزة دي مهمة؟‬

‫مش محتاج سيرفر خارجي‪.‬‬

‫مناسب للمشاريع الصغيرة والمتوسطة أو حتى للتجربة‬

‫الـ ‪ API Routes‬شغال بنفس بيئة المشروع‪ ،‬فبتقدر تستخدم مميزات ‪Next.js‬‬

‫زي ‪ Middleware‬بسهولة‪.‬‬

‫إزاي تبدأ؟‬

‫أي فايل جوه ‪ pages/api‬بيتحول تلقائًي ا لـ ‪ ...API Endpoint‬شوفت ابسط من‬

‫😆‬ ‫كدا !‬

‫مثال عملي بسيط‪:‬‬

‫لو رّو حت على ‪ api/hello/‬في المتصفح‪ ،‬هتشوف‪:‬‬

 ‫مثال عملي مع الـ ‪:POST Request‬‬

‫كيفية االختبار؟‬

‫استخدم مكتبة زي ‪ axios‬أو ‪ fetch‬لإرسال البيانات للـ ‪.API‬‬

‫رسم توضيحي‪:‬‬

‫‪ :hello.js‬بيرجع رسالة ثابتة (‪.)GET‬‬

‫‪ :login.js‬بيتعامل مع بيانات تسجيل الدخول (‪.)POST‬‬

‫ملحوظه‪ :‬نزلت قبل كدا بوست منفصل عن ال ‪ API Routes‬ممكن تطلع عليه من هنا‬
 ‫واحدة من أهم الخطوات اللي الزم تاخد بالك منها هي اختيار الطريقة المناسبة‬

‫لتنسيق الموقع‪ next.js .‬بيدعم طرق مختلفة لالستايلينج وكل طريقة ليها‬

‫مميزاتها واستخداماتها حسب طبيعة مشروعك‪...‬‬

‫👇‬ ‫تعالي نتعرف سوا علي ال ‪ 3‬طرق الرئيسيه لالستايلينج في ‪next.js‬‬

‫‪CSS & Sass Modules‬‬

‫‪Styled Components‬‬ ‫‪ 3‬طرق رئيسية‬ ‫‪Global Styles‬‬

‫طيب يا تري ليه اختيارك لطريقة االستايلينج مهم؟‬

‫هي بالظبط عامله زي لما تيجي تجهز بيتك وتفكر أشطب الحيطة دي ورق حائط‬

‫وال ألونها؟ نفس الفكرة تقريبا بتحصل مع االستايلينج في الكود اختيارك للطريقة‬

‫اللي هتكتب بيها االستايلينج مش رفاهية علي قد ما هي عامل في سرعة الشغل‬

‫وسهولة التعديالت‪ .‬فلو اخترت طريقة معقدة لمجرد إنها تريندي ممكن تالقي‬

‫😆‬ ‫نفسك متعطل في نص المشروع‬

 ‫‪ .1‬الطريقه االولي‪🎯 CSS & Sass Modules :‬‬
‫دي اكتر طريقة منظمة لأن كل ملف ‪ CSS‬أو ‪ SCSS‬بيتحول لموديول خاص‬

‫بيه يعني الكالسات اللي بتكتبها مش هتتعارض مع الملفات او الكالسات‬

‫التانية‪.‬‬

‫إزاي نستخدمها؟‬

‫بتعمل ملف ‪ CSS‬أو ‪ SCSS‬بنفس اسم الـ ‪ Component‬وتحطه في نفس الفولدر‪.‬‬

‫بتسمي الكالسات بطريقة عادية جًد ا‪ ،‬وبعد كده تستدعيها جوه الـ ‪.Component‬‬

‫مثال عملي بسيط‪:‬‬

‫وده بيخلي االستيالت خاصة بالـ ‪ Button Component‬ده بس‪.‬‬

‫😆‬ ‫وبس كدا‬

‫👇‬ ‫نيجي بقا علي تاني طريقه‬

 ‫‪ .2‬الطريقه التانيه‪🧵 Styled Components :‬‬
‫لو بتحب تكتب ستايالتك جوه الكود بتاعك فالطريقة دي مناسبه ليك‪ .‬الن‬

‫ال ‪ Styled Components‬مكتبة بتخليك تعمل ‪ Components‬فيها‬

‫ستايل وداتا في مكان واحد‪.‬‬

‫إزاي نستخدمها؟‬

‫الأول بتنزل المكتبة‪:‬‬

‫بعدين بتكتب الكود بالشكل دا‪:‬‬

‫😆‬ ‫وبس كدا‬

‫👇‬ ‫نيجي بقا علي تالت طريقه‬

 ‫‪ .3‬الطريقه التالته‪🌍 Global Styles :‬‬
‫دي بقا الطريقة التقليدية لو عايز تضيف ستايالت عامة لكل المشروع‪ .‬أي ملف‬

‫‪ CSS‬بتحطه هنا هيشتغل في كل الصفحات‪.‬‬

‫إزاي نستخدمها؟‬

‫ببساطة‪ ،‬بتحط ملف ‪ CSS‬جوا فولدر ‪( /styles‬مثًال‪ )globals.css :‬وتستدعيه‬

‫في ملف _‪app.js‬‬

‫مقارنة بين طرق االستايلينج في ‪Next.js‬‬

‫االستخدام األفضل‬ ‫المزايا‬ ‫الشرح‬ ‫الطريقة‬

‫كل ‪ COMPONENT‬بيستخدم‬
‫لما تحتاج تنظيم بسيط‬
‫‪ SCOPED CSS -‬تلقائي‬ ‫ملف ‪ CSS‬أو ‪ SASS‬مستقل‬ ‫‪CSS & SASS‬‬
‫للستايالت الخاصة بكل‬
‫سهل التنظيم‬ ‫بيتم استيراده واالستايالت‬
‫‪ COMPONENT‬بدون إضافة‬ ‫‪ -‬مدمج مباشرة في ‪NEXT.JS‬‬ ‫بتكون ‪ SCOPED‬للـ‬ ‫‪MODULES‬‬
‫مكتبات خارجية‪.‬‬
‫‪ COMPONENT‬ده بس‪.‬‬

‫مكتبة خارجية بتتيح كتابة‬

‫لما تحتاج ديناميكية في‬ ‫مثالي في تطبيقات فيها‬ ‫‪ CSS‬داخل ‪JAVASCRIPT‬‬
‫االستايالت أو بتشتغل عىل‬ ‫‪THEME SWITCHING‬‬ ‫باستخدام ‪TAGGED‬‬ ‫‪STYLED‬‬
‫مشروع محتاج ‪.THEME‬‬ ‫‪ -‬دعم ‪DYNAMIC STYLING‬‬ ‫‪ ،TEMPLATE LITERALS‬مع‬
‫دعم ‪.DYNAMIC STYLING‬‬
‫‪COMPONENTS‬‬

‫تعريف ستايالت عامة‬

‫باستخدام ‪ CSS‬عادي داخل‬
‫لما تحتاج قواعد استايل‬
‫‪ PAGES/_APP.JS‬أو‬
‫موحدة تطبقها عىل مستوى‬ ‫تنظيم أفضل للصفحات‪.‬‬
‫باستخدام مكتبات زي‬
‫الموقع كله (زي الـ ‪ RESET‬أو‬ ‫مناسب للمشاريع الكبيرة‪.‬‬
‫‪ TAILWIND CSS‬لتطبيق‬
‫الـ ‪.)TYPOGRAPHY‬‬ ‫‪GLOBAL STYLES‬‬
‫الستايالت عىل مستوى‬
‫المشروع كله‬
 ‫‪Data Fetching .9‬‬
‫بص يا معلم أي موقع محتاج يجيب بيانات من مكان معين علشان يعرضها‬

‫لليوزر البيانات دي ممكن تكون من ‪ API‬او ‪ Database‬أو ملف ‪ JSON‬متخزن‬

‫عندك‪ ...‬هنا بييجي دور ال ‪ Data Fetching‬اللي هو ببساطة "إزاي الموقع‬

‫بتاعك يتعامل مع البيانات ويجيبها ويعرضها"‪.‬‬

‫هنتكلم دلوقتي عن الـ ‪ Data Fetching Methods‬الأساسية في‬

‫‪ ...Next.js‬هنركز على‪:‬‬
‫‪getStaticProps‬‬

‫‪getServerSideProps‬‬

‫)‪Incremental Static Regeneration (ISR‬‬

‫‪ .1‬الطريقه االولي‪🗂️ getStaticProps :‬‬

‫الطريقة دي هتستخدمها لو عايز تجيب البيانات وقت ‪ Build Time‬يعني قبل‬

‫ما الموقع يتنشر‪.‬‬

‫إمتى تستخدمها؟‬

‫لما يكون عندك بيانات مش بتتغير كتير‪ ،‬زي صفحة منتجات أو مقالة ثابتة‪.‬‬

‫الصفحة دي هتتعمل مرة واحدة أثناء الـ ‪.Build‬‬

 ‫‪ .2‬الطريقه الثانيه‪🌐 getServerSideProps :‬‬
‫لطريقة دي بتشتغل كل مرة المستخدم يفتح فيها الصفحة وبترجع دايما‬

‫بيانات محدثة لكنها أبطأ شوية‬

‫إمتى تستخدمها؟‬

‫لما يكون عندك بيانات بتتغير بسرعة أو محتاجة ‪ Authentication‬زي‬

‫‪ Dashboard‬أو صفحة ‪.Profile‬‬

‫كل طلب جديد هيعمل ‪ Fetch‬للبيانات في الوقت نفسه‪.‬‬

‫‪ .3‬الطريقه الثالثه‪Incremental Static :‬‬

‫)‪🔄 Regeneration (ISR‬‬
‫دي مزيج بين الطريقتين اللي فاتوا تقدر تعمل صفحات ثابتة والبيانات تتحدث‬

‫بشكل تلقائي كل فترة عادي‬

‫إمتى تستخدمها؟‬

‫لما تكون عايز تستفيد من سرعة الصفحات الثابتة مع تحديث البيانات باستمرار‪،‬‬

‫زي مواقع الأخبار أو المنتجات‪.‬‬

 ‫هنا الصفحة هتتحدث كل ‪ 60‬ثانية لو في بيانات جديدة‪.‬‬

‫مثال عملي علي‬

‫‪Incremental Static‬‬

‫)‪:Regeneration (ISR‬‬

‫ملحوظة‪ Next.js :‬بيتيحلك تدمج الطرق دي مع بعض لو مشروعك محتاج أكتر من طريقة عىل حسب الحالة‪👌 .‬‬
 ‫‪API Routes .10‬‬
‫لو بتفكر تضيف ‪ Backend‬خفيف في مشروعك من غير وجع دماغ أو سيرفر‬

‫خارجي يبقي الـ ‪ API Routes‬في نيكست هي الخيار المناسب هتضيف‬

‫‪ Endpoints‬عشان تتعامل مع البيانات وال ‪ Requests‬وتبعت ‪Responses‬‬

‫مباشرة من المشروع‪ ...‬ف تعالي سوا يا صديقي نفهم اكتر عن ال ‪API‬‬

‫‪ Routes‬في نيكست‪.‬‬

‫‪Building API Endpoints‬‬

‫‪Middleware‬‬ ‫‪Handling Requests‬‬

‫الرسم التوضيحي ده بيشرح العالقة بين ‪ 3‬أجزاء أساسية في بناء الـ ‪ API Routes‬في ‪Next.js‬‬

‫‪ :Building API Endpoints‬دا الجزء اللي بتحدد فيه كل نقطة وصول للـ ‪ API‬بتاعك‪.‬‬

‫‪ :Handling Requests‬ده الجزء اللي بيتعامل مع الطلبات اللي جاية زي إنك تعرف الطلب‬
‫نوعه إيه وترد عليه بشكل مناسب‪.‬‬

‫‪ :Middleware‬مرحلة قبل الوصول للنهاية بتحصل فيها معالجة زي التحقق من البيانات أو الـ‬
‫‪.Authentication‬‬
 ‫‪🏗️ Building API Endpoints .1‬‬
‫أي ملف هتحطه جوا فولدر ‪ /pages/api‬هيبقى أوتوماتيك ‪ .Endpoint‬يعني‬

‫مث ًال لو عملت ملف اسمه ‪ hello.js‬هيبقى متاح في ‪.api/hello/‬‬

‫مثال عملي‪:‬‬

‫لما تدوس على ‪ api/hello/‬هيرجعلك الرد اللي مكتوب فوق‪ ...‬الطريقة دي‬

‫مفيدة لو محتاج تبني ‪ API‬سريع للـ ‪.Frontend‬‬

‫‪🤝 Handling Requests and Responses .2‬‬

‫بتتعامل مع كل أنواع الـ )‪ HTTP Methods (GET, POST, PUT, DELETE...‬بكل‬

‫عليه‪.‬‬ ‫بساطة‪ .‬الفكرة إنك بتحدد نوع الطلب وتعمل اللي محتاجه بناًء‬

‫مثال عملي‪:‬‬

‫بيبعته‪.‬‬ ‫على اللي اليوزر‬ ‫هنا الكود بيتعامل مع أكتر من نوع طلب بناًء‬
 ‫‪⚙️ Middleware and Custom Functions .3‬‬
‫لو عندك ‪ Logic‬بيتكرر زي التحقق من الـ ‪ Authentication‬أو ‪Validating‬‬

‫البيانات ممكن تكتبه كـ ‪ Middleware‬وتستخدمه في أكتر من ‪.Endpoint‬‬

‫مثال عملي‪:‬‬

‫الفكرة هنا إنك تفصل الـ ‪ Logic‬بتاع التحقق وتستخدمه في أي مكان بسهولة‪.‬‬

‫‪🛠️ Working with External APIs .4‬‬

‫ممكن تستخدم ‪ API Routes‬كـ ‪ Proxy‬عشان تتعامل مع ‪ APIs‬خارجية‪ .‬ده‬

‫هيكون مفيد عشان تحمي الـ ‪ API Key‬أو تعمل ‪ Manipulation‬للبيانات قبل ما‬

‫توصل للمستخدم‪.‬‬

‫مثال عملي‪:‬‬

‫كده اليوزر بتاعك هيدوس على ‪ api/external/‬وأنت اللي هتدير التفاصيل في الخلفية‪.‬‬
 ‫‪Middleware .11‬‬
‫لو بتدور على طريقة تتحكم في الطلبات اللي بتوصل للسيرفر قبل ما توصل‬

‫للـ ‪ API‬أو الصفحات فالـ ‪ Middleware‬في ‪ Next.js‬هو االختيار المناسب‪,‬‬

‫النهارده هنشرح سوا عن إزاي تستخدم الـ ‪ Middleware‬عشان تضيف طبقة‬

‫تحكم إضافية على مشروعك‪.‬‬

‫‪ .1‬يعني إيه ‪Middleware‬؟ 🤔‬

‫الـ ‪ Middleware‬ببساطة هو كود بيتنفذ قبل ما الريكويست يوصل للـ ‪ API‬أو‬

‫الصفحات‪ ...‬طيب لي استخدمه اساسا ؟ عشان تتحقق من المستخدمين اول تفلتر‬

‫أو تعدل البيانات او عيد توجيه الطلبات‪.‬‬

‫‪ .2‬طيب إزاي تكتب ‪Middleware‬؟ ️✍‬

‫بكل بساطه أي ملف اسمه ‪ middleware.js‬في الروت بتاع المشروع هيشتغل كـ‬

‫‪.Middleware‬‬

‫مثال عملي‪:‬‬

‫هنا بنعمل إعادة توجيه لأي حد يحاول يدخل على ‪ dashboard/‬من غير ما يكون‬

‫مسجل دخول‪.‬‬
 ‫‪ .3‬استخدامات الـ ‪💡 Middleware‬‬
‫أ‪ .‬التحقق من المستخدمين‪:‬‬
‫عايز تتأكد إن المستخدم اللي داخل الصفحة مسجل دخول؟ ممكن تستخدم الكود ده‪:‬‬

‫ب‪ .‬إضافة هيدرز (‪:)Headers‬‬

‫عايز تضيف هيدرز لكل الطلبات؟ ممكن تستخدم الكود ده‪:‬‬

‫ج‪ .‬التعامل مع لغات متعددة (‪:)Localization‬‬

‫على اللغة‪:‬‬ ‫توجيه المستخدمين بناًء‬
 ‫جدول بيرتب وبيوضح كل حاجة عن ‪⚡ Middleware‬‬
‫أهم االستخدامات‬ ‫مثال عملي‬ ‫الشرح‬ ‫‪-‬‬

‫التحقق من الصالحيات‪.‬‬
‫‪ MIDDLEWARE‬يتحقق من إذا‬ ‫كود يتم تنفيذه بين استقبال‬ ‫تعريف‬
‫كان المستخدم مسجل الدخول‬ ‫الطلب من المستخدم‬ ‫‪MIDDLEWARE‬‬
‫التوجيه حسب الشروط‪.‬‬ ‫قبل الوصول لصفحة معينة‪.‬‬ ‫وتسليمه للـ ‪ ROUTE‬النهائي‪.‬‬

‫يتم وضع ‪MIDDLEWARE‬‬

‫تشغيل عىل كل الطلبات بدون‬ ‫إنشاء ملف ‪MIDDLEWARE.JS‬‬
‫في ملف ‪MIDDLEWARE.JS‬‬ ‫مكان الملف‬
‫تحديد ‪ ROUTE‬معين‪.‬‬ ‫في المجلد الرئيسي للمشروع‪.‬‬
‫في الجذر الرئيسي للمشروع‪.‬‬

‫طلب‪DASHBOARD/ :‬‬
‫‪ :MIDDLEWARE‬يتحقق إذا كان‬ ‫يستقبل الطلب > يتحقق من‬
‫تغيير مسار الطلب‪.‬‬
‫فحص البيانات‪.‬‬
‫المستخدم "‪."ADMIN‬‬ ‫الشرط > يوجه الطلب بناًء‬ ‫دورة العمل‬
‫نتيجة‪ :‬يوجه المستخدم للصفحة‬ ‫عىل النتيجة‪.‬‬
‫أو يعيد خطأ ‪.401‬‬

‫يشتغل عىل مستوى‬

‫إعادة توجيه‪ :‬إذا كانت اللغة ‪،AR‬‬
‫عالمي لكل الطلبات‪.‬‬
‫التحقق من اللغة‪.‬‬ ‫يوجه المستخدم إىل‬
‫إضافة ‪HEADERS‬‬ ‫‪ ،AR/DASHBOARD/‬ولو ‪EN‬‬
‫يمكن تعديل الـ‬ ‫أهم الميزات‬
‫يوجهه إىل ‪.EN/DASHBOARD/‬‬ ‫‪ RESPONSE‬والـ‬
‫‪.REQUEST‬‬

‫التحقق من المصادقة‬
‫(‪.)AUTHENTICATION‬‬
‫حماية الصفحات الحساسة‪.‬‬ ‫أقل شوية بسبب التحميل اللحظي‬
‫التوجيه الديناميكي‬
‫أشهر الحاالت‬
‫(‪.)DYNAMIC ROUTING‬‬

‫يتم تشغيله تلقائًي ا عىل جميع‬

‫إدارة الطلبات بسهولة بدون تعديل‬ ‫التكامل مع‬
‫‪----‬‬ ‫الطلبات بمجرد وضع الملف‬
‫‪ ROUTES‬يدوًي ا‪.‬‬ ‫‪NEXT.JS‬‬
‫في المكان الصحيح‪.‬‬

‫تسهيل التحقق المركزي بدًال‬ ‫فوائد‬

‫زيادة األداء‪.‬‬ ‫‪----‬‬
‫من التكرار في كل ‪.ROUTE‬‬ ‫‪MIDDLEWARE‬‬

‫قد يزيد من تعقيد المشروع‬

‫استخدامه فقط عند الضرورة‪.‬‬ ‫‪----‬‬
‫لو تم استخدامه بشكل زائد‪.‬‬
‫عيوب محتملة‬