Next.js

Next.js إطار عمل مبني على React يضيف التوجيه، والعرض على الخادم، وجلب البيانات، وتحسين الأداء. يشرح هذا المقال App Router (مجلد app/).

التوجيه بالملفات

app/
  layout.tsx          ← الإطار المشترك لكل الصفحات
  page.tsx            ← المسار /
  blog/
    page.tsx          ← /blog
    [slug]/page.tsx   ← /blog/أي-قيمة

كل مجلد مقطع من الرابط، وملف page.tsx يجعله صفحة قابلة للزيارة.

مكونات الخادم والعميل

المكونات في app/ هي مكونات خادم افتراضياً: تعمل على الخادم فقط، ويمكنها قراءة قاعدة البيانات مباشرة، ولا يُرسل كودها إلى المتصفح.

// 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 وعداً:

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)

// app/api/health/route.ts
export async function GET() {
  return Response.json({ ok: true });
}

أخطاء شائعة

• وضع 'use client' في الصفحة كلها بلا حاجة، فيُرسل كل شيء إلى المتصفح.
• تمرير دوال أو كائنات غير قابلة للتسلسل من مكون خادم إلى مكون عميل.
• كشف أسرار عبر متغيرات بيئة تبدأ بـ NEXT_PUBLIC_ (هذه تُضمَّن في كود المتصفح).