الصفحات والتخطيطات

الدرس 7 من 25· ⏱ 1 دقائق قراءة

الصفحة (Page)

كل مجلّد فيه page.tsx يصبح مسارًا:

app/about/page.tsx   →   /about
app/blog/page.tsx    →   /blog

// app/about/page.tsx
export default function About() {
  return <h1>من نحن</h1>;
}

التخطيط (Layout)

غلاف مشترك يلتفّ حول الصفحات ويبقى ثابتًا عند التنقّل:

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <header>الترويسة</header>
        {children}
        <footer>التذييل</footer>
      </body>
    </html>
  );
}

التخطيطات المتداخلة

كل مجلّد يمكن أن يملك layout.tsx خاصًّا يلتفّ حول صفحاته:

app/dashboard/layout.tsx   # غلاف لكل صفحات /dashboard

💡 التخطيطات لا تُعاد تهيئتها عند التنقّل بين صفحاتها — تحافظ على الحالة.

🎯 التالي: الروابط والتنقّل.

هل كان هذا الدرس مفيدًا؟