سجل التعديلات

الفرق مقارنةً بالنسخة السابقة

+ **Next.js** إطار عمل مبني على React يضيف التوجيه، والعرض على الخادم، وجلب البيانات، وتحسين الأداء. يشرح هذا المقال **App Router** (مجلد `app/`).
  
+ ## التوجيه بالملفات
+ 
+ ```
+ app/
+   layout.tsx          ← الإطار المشترك لكل الصفحات
+   page.tsx            ← المسار /
+   blog/
+     page.tsx          ← /blog
+     [slug]/page.tsx   ← /blog/أي-قيمة
+ ```
+ 
+ كل مجلد مقطع من الرابط، وملف `page.tsx` يجعله صفحة قابلة للزيارة.
+ 
+ ## مكونات الخادم والعميل
+ 
+ المكونات في `app/` هي **مكونات خادم** افتراضياً: تعمل على الخادم فقط، ويمكنها قراءة قاعدة البيانات مباشرة، ولا يُرسل كودها إلى المتصفح.
+ 
+ ```tsx
+ // app/blog/page.tsx — مكون خادم
+ export default async function Blog() {
+   const posts = await getPosts();     // استعلام على الخادم
+   return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
+ }
+ ```
+ 
+ أضف `'use client'` في أول الملف عندما يحتاج المكون حالة أو أحداثاً أو واجهات المتصفح. اجعل مكونات العميل صغيرة وفي أطراف الشجرة لتقليل JavaScript المرسلة.
+ 
+ ## المسارات الديناميكية
+ 
+ في الإصدار 15 أصبحت `params` وعداً:
+ 
+ ```tsx
+ export default async function Post({ params }: { params: Promise<{ slug: string }> }) {
+   const { slug } = await params;
+   const post = await getPost(slug);
+   if (!post) notFound();
+   return <article><h1>{post.title}</h1></article>;
+ }
+ ```
+ 
+ ## معالجات المسارات (Route Handlers)
+ 
+ ```ts
+ // app/api/health/route.ts
+ export async function GET() {
+   return Response.json({ ok: true });
+ }
+ ```
+ 
+ ## أخطاء شائعة
+ 
+ - وضع `'use client'` في الصفحة كلها بلا حاجة، فيُرسل كل شيء إلى المتصفح.
+ - تمرير دوال أو كائنات غير قابلة للتسلسل من مكون خادم إلى مكون عميل.
+ - كشف أسرار عبر متغيرات بيئة تبدأ بـ `NEXT_PUBLIC_` (هذه تُضمَّن في كود المتصفح).