📖 سلسلة تعلم React و Next.js | المقال 7
⚡ Next.js API Routes - بناء Backend
مع Next.js لا تحتاج Backend منفصل! أنشئ API داخل مشروعك!
🤔 ما هي API Routes؟
API Routes = نقاط نهاية (endpoints) داخل Next.js
تعمل كـ Backend بدون الحاجة لسيرفر منفصل!
تعمل كـ 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
