Next.js 15 الدليل الشامل للتطوير

# Next.js 15 الدليل الشامل للتطوير

قم ببناء تطبيقات ويب حديثة وعالية الأداء باستخدام Next.js 15، مستفيداً من أحدث الميزات مثل App Router و Server Components و Server Actions.

## إعداد المشروع

### إنشاء مشروع جديد

```bash
npx create-next-app@latest my-project --typescript --tailwind --app
cd my-project
npm run dev
```

### هيكل المجلدات الموصى به

```
my-project/
├── src/
│   ├── app/                    # App Router (المسارات والصفحات)
│   │   ├── layout.tsx          # التخطيط الرئيسي
│   │   ├── page.tsx            # الصفحة الرئيسية
│   │   ├── loading.tsx         # حالة التحميل
│   │   └── error.tsx           # معالجة الأخطاء
│   ├── components/             # المكونات القابلة لإعادة الاستخدام
│   │   ├── ui/                 # مكونات واجهة المستخدم
│   │   └── forms/              # مكونات النماذج
│   ├── lib/                    # الأدوات والإعدادات
│   └── types/                  # تعريفات TypeScript
└── next.config.ts              # إعدادات Next.js
```

## مكونات الخادم (Server Components)

يتم عرض مكونات الخادم بالكامل على الخادم مما يقلل من JavaScript المرسل إلى العميل.

### مثال على مكون الخادم

```typescript
// app/products/page.tsx
import { getProducts } from "@/lib/api";

// يتم عرض هذا المكون بالكامل على الخادم
export default async function ProductsPage() {
  // جلب البيانات مباشرة بدون useEffect
  const products = await getProducts();

  return (
    <main className="container mx-auto py-8" dir="rtl">
      <h1 className="text-3xl font-bold mb-6">منتجاتنا</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {products.map((product) => (
          <article key={product.id} className="border rounded-lg p-4">
            <h2 className="text-xl font-semibold">{product.name}</h2>
            <p className="text-gray-600">{product.description}</p>
            <span className="text-lg font-bold text-blue-600">
              {product.price} ر.س
            </span>
          </article>
        ))}
      </div>
    </main>
  );
}
```

## إجراءات الخادم (Server Actions)

```typescript
// app/actions/contact.ts
"use server";

import { z } from "zod";
import { revalidatePath } from "next/cache";

const contactSchema = z.object({
  name: z.string().min(2, "الاسم يجب أن يحتوي على حرفين على الأقل"),
  email: z.string().email("عنوان البريد الإلكتروني غير صالح"),
  message: z.string().min(10, "الرسالة يجب أن تحتوي على 10 أحرف على الأقل"),
});

export async function submitContact(formData: FormData) {
  const data = {
    name: formData.get("name") as string,
    email: formData.get("email") as string,
    message: formData.get("message") as string,
  };

  const result = contactSchema.safeParse(data);

  if (!result.success) {
    return {
      success: false,
      errors: result.error.flatten().fieldErrors,
    };
  }

  await saveMessage(result.data);
  revalidatePath("/contact");
  
  return { success: true, message: "تم إرسال الرسالة بنجاح" };
}
```

### نموذج مع Server Action

```typescript
// components/ContactForm.tsx
"use client";

import { useFormState, useFormStatus } from "react-dom";
import { submitContact } from "@/app/actions/contact";

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="bg-blue-600 text-white px-6 py-2 rounded-lg disabled:opacity-50"
    >
      {pending ? "جاري الإرسال..." : "إرسال الرسالة"}
    </button>
  );
}

export function ContactForm() {
  const [state, action] = useFormState(submitContact, null);

  return (
    <form action={action} className="space-y-4 max-w-md" dir="rtl">
      <div>
        <label htmlFor="name" className="block text-sm font-medium">
          الاسم
        </label>
        <input
          type="text"
          id="name"
          name="name"
          required
          className="mt-1 block w-full rounded-md border px-3 py-2"
        />
        {state?.errors?.name && (
          <p className="text-red-500 text-sm">{state.errors.name}</p>
        )}
      </div>

      <div>
        <label htmlFor="email" className="block text-sm font-medium">
          البريد الإلكتروني
        </label>
        <input
          type="email"
          id="email"
          name="email"
          required
          className="mt-1 block w-full rounded-md border px-3 py-2"
        />
      </div>

      <div>
        <label htmlFor="message" className="block text-sm font-medium">
          رسالتك
        </label>
        <textarea
          id="message"
          name="message"
          rows={4}
          required
          className="mt-1 block w-full rounded-md border px-3 py-2"
        />
      </div>

      <SubmitButton />

      {state?.success && (
        <p className="text-green-600">{state.message}</p>
      )}
    </form>
  );
}
```

هذا الدليل الشامل يساعد المطورين الناطقين بالعربية على إتقان Next.js 15.