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​

باستخدام JWT Tokens​

لما الباك بيرجعلك Token، خليه في Cookie أو LocalStorage.
وابعت كل Request كده:

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

باستخدام 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

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