أتقن Next.js 15 مع App Router و Server Components و Server Actions. تعلم أفضل الممارسات لتطوير الويب الحديث باستخدام React و TypeScript.
# 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.This nextjs prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their nextjs implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For nextjs projects, consider mentioning your framework version, coding style, and any specific libraries you're using.