كيفية استخدام تخطيطات layouts مختلفة في Next.js 13

Abdelrahman Mostafa10 · 22 يناير

أرغب في الترقية إلى الإصدار 13 من Next.js، ولكن لدي عدة قوائم تنقل مختلفة في موقعي الشخصي، وسؤالي هو كيف يمكنني استخدام قائمة تنقل مختلفة لمسارَي "/about" و"/skills" عن القائمة المستخدمة في الصفحة الرئيسية ومسار "/contact"؟

كنت أعتقد أنه يمكن الآن إنشاء مجلدات فرعية مختلفة داخل مجلد "app"، مع تضمين ملف "layout.tsx" في كل منها، ولكن عندئذٍا يتم إنشاء مسارات غير مرغوب فيها.

لقد جرّبت الهيكل التالي للملفات:

/app/firstLayout/layout.tsx

/app/firstLayout/page.tsx

/app/firstLayout/contact/page.tsx

/app/LayoutTwo/layout.tsx

/app/LayoutTwo/about/page.tsx

/app/LayoutTwo/skills/page.tsx

لكن نتج عن ذلك المسارات التالية:

../firstLayout
../firstLayout/contact
../LayoutTwo/about
../LayoutTwo/skills

لا أرغب في تضمين أجزاء التخطيط (Layout) في عناوين URL، فكيف يمكنني تحقيق ذلك؟

محمد سعد شحرور · 23 يناير

يجب عليك ادراج ملف layout.tsx في كل مسار وعدم ادراج العناصر <html> أو <body> داخل ال component.

هذا مثال بسيط لصفحة layout.tsx داخل المسار app/dashboard/layout.tsx:

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

كما يمكنك رؤية المزيد من التفاصيل هنا من ال documentation الخاص ب next js.

كيفية استخدام تخطيطات layouts مختلفة في Next.js 13

السؤال

Abdelrahman Mostafa10

1 جواب على هذا السؤال

Recommended Posts

محمد سعد شحرور

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية