Magdy Atef Zahran

🧩 كل اللي محتاج تعرفه عن الـ Integration بين الـ Front والـ Back في Next.js 👨‍💻🔥

فيه نقطة ناس كتير بتقف عندها بعد ما تخلص شغل الـ Front:

أزاي أوصل الفرونت بالباك؟

وساعتها تبدأ اللخبطه بين الـ APIs والـ Tokens والـ Fetch والـ Errors… الخ.

فخلينا نمشيها سطر بسطر ونبسط الدنيا 👇

🎯 في الأول يعني إيه Integration أصلاً…؟

الـ Integration يعني إن الـ Frontend (Next.js) يبعت Request للـ Backend (Node / Laravel / Python… إلخ) والباك يرد عليه بـ Data أو Error.

يعني الفرونت بيبعت طلب للباك (Request) والباك بيرد عليه بالبيانات المطلوبة (Response).

الفرونت بيقول: “هاتلي المستخدمين”

والباك يرد: “اتفضل البيانات”

⚙️ طيب اي هي أنواع الـ Integration…؟

Internal APIs

دا لو الباك جوه مشروعك نفسه (يعني نفس الـ Repo).

// هتعمل API Routes في /app/api/…

// app/api/users/route.js export async function GET() { const users = await getUsersFromDB(); return Response.json(users); }

// وبعد كدا تناديها كده من أي كومبوننت عادي:

const res = await fetch("/api/users"); const data = await res.json();

وبتتفادى مشاكل الـ CORS غير إن التطوير بيكون أسهل وأسرع بكتير.

External APIs

دا لو الباك اند منفصل على سيرفر تاني:

const res = await fetch("https://api.mybackend.com/users", { headers: { Authorization: `Bearer ${token}`, }, });

وهنا بقى لازم تزبط إعدادات الـ CORS في الباك، وتبعت الـ Token صح، عشان أي Error يرجع من السيرفر تعرف تتعامل معاه

🧠 طيب Server ولا Client…؟

Server Component: لو الداتا عامة (زي Blog أو Products).
Client Component: لو فيها Interactivity أو Data شخصية (زي profile أو forms).

مثال عملي عشان الدنيا توضح اكتر

لو Server Component:

export default async function ProductsPage() { const res = await fetch("https://api.example.com/products", { cache: "no-store", }); const products = await res.json(); return ( <div> {products.map(p => ( <ProductCard key={p.id} product={p} /> ))} </div> ); }

لو Client Component:

"use client"; function ProductCard({ product }) { const [liked, setLiked] = useState(false); return ( <div onClick={() => setLiked(!liked)}> {product.name} {liked ? "❤️" : "♡"} </div> ); }

🔐 طيب هنتعامل مع الـ Auth والـ Sessions والـ Login إزاي بقى…؟

1️⃣ الـ JWT Tokens :

لو الباك بيرجعلك Token خليه في Cookie أو LocalStorage

// وابعت كل Request بالشكل دا:

headers: { Authorization: `Bearer ${token}` }

2️⃣ الـ NextAuth.js :

اما لو بتستخدم NextAuth فـ هو بيهندل موضوع السيشن بدالك، انتا بس هتجيب اليوزر كده:

import { getServerSession } from "next-auth"; const session = await getServerSession(authOptions);

🗄️ طيب هنتعامل مع الـ Database إزاي…؟

بص يا كبير لو الباك جوه المشروع نفسه فـ الموضوع بسيط هتستخدم Prisma أو Mongoose وتشتغل عالداتا دايركت من السيرفر، يعني API Route هي واحدة هتجيب الداتا وترد بيها وخلاص الموضوع انتهى
إنما لو الباك خارجي (سيرفر منفصل) يبقى متدخلش أنت في قصة الـ DB خالص، هتسيب الباك هو اللي يتكلم مع الداتابيز ويرجعلك الـ JSON جاهز، وانت كل اللي عليك تجيب الداتا بـ Axios وتعرضها في الـ UI وبس كدا

📤 طيب هنرفع الملفات ونتعامل مع الـ File Upload إزاي…؟

مينفعش تبعت ملفات بـ JSON عادي لازم تستخدم FormData.

// يعني مثلاً لو عندك input بيرفع ملف كدا:

// ساعتها هتبعته كده:

const handleFileChange = async (e) => { const file = e.target.files[0]; const formData = new FormData(); formData.append("file", file); await fetch("/api/upload", { method: "POST", body: formData, }); };

ونفس الفكرة بقا لو بترفع على Cloudinary أو Supabase، بس بدل الـ /api/upload هتحط الـ endpoint بتاع السيرفر أو الخدمة اللي انت شغال عليها عادي.

🚨 طيب هنتعامل مع الـ Errors والـ Rate Limiting إزاي بقى…؟

أول حاجة متفتكرش إن الريكوست هيمشي دايما فل, لازم تبص على الـ Response وتشوف رجعلك إيه بالظبط:

if (!res.ok) { const error = await res.json(); throw new Error(error.message || "I miss u"); }

كده هتمسك أي Error جاي من السيرفر وتعرضه لليوزر بدل ما الصفحة تقع فجأة

ممكن مثلا تعمل toast كده في الفرونت تقول فيها إن في مشكلة حصلت أو تطلب منه يحاول تاني…. وراجع الـ status code (زي 400 أو 500) علي طول عشان تفهم نوع الغلط وتتصرف على أساسه.

أما بالنسبة للـ Rate Limiting، فده مهم عشان تمنع السبام والـ abuse، يعني متخليش أي حد يضرب الـ API عندك بمية Request في الثانية.

عشان كدا استخدم تولز زي Upstash Redis أو RateLimiter.js في الباك تحدد مثلا إن كل يوزر ليه 100 طلب في الساعه… كده هتحمي السيرفر وتخلي الأداء ثابت حتى لو في ضغط

🔁 طب والـ Real-Time Integration بقى؟ هنعمله إزاي؟

لو عندك حاجة محتاجة تحديث لحظي زي الـ Notifications أو الـ Chat أو الـ Live Dashboard،وساعتها لازم يكون في اتصال مباشر بين الفرونت والباك بدل الـ Request العادية… فالحل اي بقا..؟

هتستخدم الادوات دي 👇

Pusher
Ably
Socket.io

دول هيخلوا الفرونت والباك يكلموا بعض لحظة بلحظة من غير ما تعمل refresh ولا re-fetch ولا الكلام دا

يعني مثلا في الشات: أول ما يوزر يبعث رسالة السيرفر يبعتها لباقي المستخدمين اللي فاتحين نفس الروم.

ولو في إشعارات مثلا: أول ما يحصل أكشن معين الباك يـpush نوتيفيكشن لكل الناس اللي المفروض يشوفوها.

ولو المشروع بسيط ومش عايز setup كبير Ably و Pusher بيوفروا SDKs سهلة تتظبط في Next.js في 5 دقائق حرفياً… أما لو عايز تحكم كامل يبقي استخدم Socket.io وشغل انتا الـ server.

🧱 طييب الـ Architecture هيترتب إزاي بقاا

عشان الـ Integration يبقى نضيف وسهل امشي على الـ Structure ده

src/ ├── app/ │ ├── (routes) │ │ ├── page.tsx ← Server Components (UI) │ │ └── ... │ ├── api/ ← API Routes (internal backend) │ │ ├── users/ │ │ │ └── route.ts │ │ └── auth/ │ │ └── route.ts │ └── layout.tsx ├── lib/ │ ├── db.ts ← Database connection │ ├── auth.ts ← Auth config (NextAuth) │ ├── rate-limit.ts ← Rate Limiter logic │ └── fetcher.ts ← Common fetch logic (Axios instance) ├── components/ │ ├── ui/ ← Shared UI Components │ ├── forms/ │ └── cards/ └── utils/ └── helpers.ts ← Utility functions (parse, format, etc.)

// كل حاجة في مكانها:

app/api ده مكان الـ Endpoints بتاعتك
lib/ هنا هتحط الحاجات المشتركة اللي الكود كله ممكن يحتاجها، زي التعامل مع الـ DB، Auth، أو Rate Limit
components/ دي الحاجات اللي المستخدم هيشوفها على الشاشة، الكومبوننتات بتاعت الـ UI
utils/ دي أكواد المساعدة اللي ممكن تستخدمها في أي حتة في المشروع