template.js

ملف القالب (template) يشبه التخطيط (layout) من حيث أنه يغلف كل تخطيط فرعي أو صفحة. ولكن على عكس التخطيطات التي تبقى عبر المسارات وتحافظ على الحالة، فإن القوالب تنشئ نسخة جديدة لكل من عناصرها الفرعية عند التنقل.

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

export default function Template({ children }) {
  return <div>{children}</div>
}

على الرغم من أنه أقل شيوعًا، قد تختار استخدام القالب بدلاً من التخطيط إذا كنت تريد:

• ميزات تعتمد على useEffect (مثل تسجيل مشاهدات الصفحة) و useState (مثل نموذج تعليقات لكل صفحة).
• تغيير السلوك الافتراضي للإطار. على سبيل المثال، حدود Suspense داخل التخطيطات تظهر الحالة الاحتياطية فقط عند تحميل التخطيط لأول مرة وليس عند تبديل الصفحات. أما في القوالب، فإن الحالة الاحتياطية تظهر في كل تنقل.

الخصائص

children (مطلوب)

يجب أن تقبل مكونات القالب وتستخدم خاصية children. يتم عرض template بين التخطيط (layout) وعناصره الفرعية. على سبيل المثال:

<Layout>
  {/* لاحظ أن القالب يحصل على مفتاح فريد. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

معلومة مفيدة:

• افتراضيًا، template هو مكون خادم (Server Component)، ولكن يمكن أيضًا استخدامه كـ مكون عميل (Client Component) من خلال توجيه "use client".
• عندما ينتقل المستخدم بين المسارات التي تشترك في template، يتم تحميل نسخة جديدة من المكون، يتم إعادة إنشاء عناصر DOM، لا يتم الحفاظ على الحالة، ويتم إعادة مزامنة التأثيرات.

سجل الإصدارات