Integration Next.js بين الفرونت والباك بسهولة

🧩 كل اللي محتاج تعرفه عن Integration الـ Front مع الـ Back في Next.js 👨‍💻🔥
فيه سؤال دايمًا بيحير الناس بعد ما تخلص شغل الـ Frontend في مشروع Next.js:
"إزاي أوصل الفرونت بالباك؟" 🤔

وساعتها تبدأ الحيرة بين الـ APIs والـ Tokens والـ Fetch والـ Errors، وكل حاجة تبان معقدة... بس متقلقش 💪
هنفهمها واحدة واحدة وبطريقة بسيطة وسلسة 👇

🎯 يعني إيه Integration أصلاً؟​

الـ Integration ببساطة يعني إن الـ Frontend (زي Next.js) بيكلم الـ Backend (زي Node.js أو Laravel أو Python).
الفرونت بيبعت Request والباك بيرد بـ Response.

يعني مثلاً:
الفرونت يقول: "هاتلي المستخدمين" 👥
والباك يرد: "اتفضل البيانات" 📦

---

⚙️ أنواع الـ Integration بين الفرونت والباك​

في نوعين أساسيين 👇

🧱 1. Internal APIs​

ده لما يكون الباك اند جوه نفس المشروع.
يعني شغال على نفس الـ Repository، وساعتها هتستخدم API Routes اللي جوه مجلد /app/api/
مثلاً:

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

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

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

الميزة هنا إنك بتتفادى مشاكل CORS والتطوير بيكون أسرع وأسهل 💨

---

🌍 2. External APIs​

ده لما الباك اند على سيرفر خارجي:

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

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

---

🧠 Server ولا Client Components؟​

سؤال مهم جدًا في Next.js 👇

• Server Component: لو البيانات عامة زي Blog أو Products.
• Client Component: لو فيها Interactivity زي forms أو user profiles.

مثال توضيحي:

🧩 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 وتعامل مع الداتا مباشرة:

const users = await prisma.user.findMany();
return Response.json(users);

لكن لو الباك خارجي، سيبه هو يتعامل مع الداتابيز،
وانت خليك في عرض البيانات اللي جاية بصيغة JSON عن طريق Axios أو Fetch بس.

---

📤 رفع الملفات (File Uploads)​

ملفات مش بتتبعت بـ JSON ❌
لازم تستخدم FormData:

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، غير الـ endpoint فقط، والباقي نفس الفكرة ✅

---

🚨 التعامل مع الـ Errors والـ Rate Limiting​

مفيش Request هتمشي 100% من غير أخطاء!
عشان كده لازم تتأكد من الـ Response:

if (!res.ok) {
  const error = await res.json();
  throw new Error(error.message || "فيه مشكلة حصلت 😅");
}

ممكن كمان تعرض رسالة للمستخدم عن طريق Toast:
“حصل خطأ، حاول تاني بعد شوية ⏳”

أما الـ Rate Limiting فمهم عشان تحمي السيرفر من الـ spam.
استخدم مثلاً Upstash Redis أو RateLimiter.js، وحدد عدد معين من الريكوستات لكل يوزر.

---

🔁 الـ Real-Time Integration (اللحظي)​

لو عندك حاجات زي Chat أو Notifications أو Live Dashboard،
يبقى لازم تستخدم أدوات بتسمح باتصال لحظي زي:

• Pusher
• Ably
• Socket.io

مثلاً في الشات: أول ما يوزر يبعث رسالة، السيرفر يـpush لباقي الناس في نفس الروم.
كل ده بيحصل بدون Refresh 👌

---

🧱 ترتيب المشروع (Architecture)​

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

src/
 ├── app/
 │   ├── api/
 │   │   ├── users/route.ts
 │   │   └── auth/route.ts
 │   └── page.tsx
 ├── lib/
 │   ├── db.ts
 │   ├── auth.ts
 │   ├── rate-limit.ts
 │   └── fetcher.ts
 ├── components/
 │   ├── ui/
 │   ├── forms/
 │   └── cards/
 └── utils/
     └── helpers.ts

كل حاجة ليها مكانها وهدفها 🎯
ده بيخلي المشروع Modular وسهل التوسعة لأي SaaS أو Dashboard احترافي.

---

🧰 الأدوات اللي استخدمناها النهارده​

• Auth: NextAuth.js
• Requests: Axios / Fetch
• Database: Prisma / Mongoose
• Caching: SWR / React Query
• Rate Limit: Upstash Redis
• Uploads: Cloudinary / Supabase
• Real-time: Pusher / Ably / Socket.io

---

✅ الخلاصة​

دلوقتي بقى عندك فهم كامل لـ Integration في Next.js:

1. API Design
2. Auth & Tokens
3. Error Handling
4. Rate Limiting
5. File Uploads
6. Real-Time Communication
7. Clean Architecture

كل دي أساسيات أي مشروع احترافي، ومجرد ما تتقنهم هتقدر تبني أي نظام متكامل بثقة 💪