📖 سلسلة تعلم React و Next.js | المقال 7

⚡ Next.js API Routes - بناء Backend

مع Next.js لا تحتاج Backend منفصل! أنشئ API داخل مشروعك!

🤔 ما هي API Routes؟

API Routes = نقاط نهاية (endpoints) داخل Next.js
تعمل كـ Backend بدون الحاجة لسيرفر منفصل!

📁 المكان:

src/app/api/
├── users/
│   └── route.ts      →  GET /api/users
├── posts/
│   └── route.ts      →  GET /api/posts
└── contact/
    └── route.ts      →  POST /api/contact

📝 إنشاء API بسيط

GET - جلب البيانات:

// src/app/api/users/route.ts

import { NextResponse } from 'next/server';

// بيانات وهمية
const users = [
  { id: 1, name: 'Ahmed', email: 'ahmed@example.com' },
  { id: 2, name: 'Sara', email: 'sara@example.com' },
];

// GET /api/users
export async function GET() {
  return NextResponse.json(users);
}

POST - إرسال بيانات:

// src/app/api/users/route.ts

import { NextResponse } from 'next/server';

// POST /api/users
export async function POST(request: Request) {
  const body = await request.json();
  
  const newUser = {
    id: Date.now(),
    name: body.name,
    email: body.email,
  };
  
  return NextResponse.json(newUser, { status: 201 });
}

📥 استخدام API في المكون

// src/app/users/page.tsx

'use client'; // مطلوب للـ useEffect

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

export default function UsersPage() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // جلب البيانات من API
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>جاري التحميل...</div>;

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-6">المستخدمين</h1>
      <ul className="space-y-2">
        {users.map(user => (
          <li key={user.id} className="p-4 bg-gray-100 rounded">
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

📤 إرسال بيانات للـ API

const addUser = async (name: string, email: string) => {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name, email }),
  });
  
  const newUser = await response.json();
  console.log('تم الإضافة:', newUser);
};

🔧 Dynamic Routes في API

// src/app/api/users/[id]/route.ts

import { NextResponse } from 'next/server';

// GET /api/users/1
export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const id = params.id;
  
  // البحث عن المستخدم
  const user = { id: parseInt(id), name: 'Ahmed' };
  
  if (!user) {
    return NextResponse.json(
      { error: 'User not found' },
      { status: 404 }
    );
  }
  
  return NextResponse.json(user);
}

📊 HTTP Methods

Method	الاستخدام
`GET`	جلب بيانات
`POST`	إنشاء جديد
`PUT`	تحديث كامل
`PATCH`	تحديث جزئي
`DELETE`	حذف

✨ مميزات API Routes

✅ لا تحتاج Backend منفصل
✅ Serverless Functions (تشتغل عند الطلب)
✅ آمن - الكود لا يظهر للعميل
✅ سهل النشر على Vercel
✅ يدعم TypeScript

💡 نصيحة: استخدم API Routes للـ authentication، database، وملفات حساسة!

📌 تسميات: Next.js API Backend

✨ ← المقال السابق | المقال التالي: TypeScript Basics → ✨

سلسلة تعلم React و Next.js مع Ahmed Issa

AllPrograms

الأربعاء، 25 مارس 2026

🔌 Next.js API Routes