إنشاء التخطيطات والصفحات
حتى الآن، يحتوي تطبيقك فقط على صفحة رئيسية. دعونا نتعلم كيف يمكنك إنشاء مسارات إضافية باستخدام التخطيطات والصفحات.
التوجيه المتداخل
يستخدم Next.js توجيه نظام الملفات حيث تُستخدم المجلدات لإنشاء مسارات متداخلة. يمثل كل مجلد جزء مسار يتوافق مع جزء URL.
يمكنك إنشاء واجهات مستخدم منفصلة لكل مسار باستخدام ملفات layout.tsx و page.tsx.
page.tsx هو ملف خاص بـ Next.js يقوم بتصدير مكون React، وهو مطلوب لكي يكون المسار متاحًا. في تطبيقك، لديك بالفعل ملف صفحة: /app/page.tsx - هذه هي الصفحة الرئيسية المرتبطة بالمسار /.
لإنشاء مسار متداخل، يمكنك تداخل المجلدات داخل بعضها البعض وإضافة ملفات page.tsx بداخلها. على سبيل المثال:
/app/dashboard/page.tsx مرتبط بالمسار /dashboard. لنقم بإنشاء الصفحة لمعرفة كيف تعمل!
إنشاء صفحة لوحة التحكم
قم بإنشاء مجلد جديد باسم dashboard داخل /app. ثم، أنشئ ملف page.tsx جديد داخل مجلد dashboard بالمحتوى التالي:
export default function Page() {
return <p>صفحة لوحة التحكم</p>;
}الآن، تأكد من أن خادم التطوير قيد التشغيل وقم بزيارة http://localhost:3000/dashboard. يجب أن ترى نص "صفحة لوحة التحكم".
هذه هي الطريقة التي يمكنك بها إنشاء صفحات مختلفة في Next.js: إنشاء جزء مسار جديد باستخدام مجلد، وإضافة ملف page بداخله.
بوجود اسم خاص لملفات page، يسمح لك Next.js بوضع مكونات واجهة المستخدم وملفات الاختبار وأكواد أخرى ذات صلة مع مساراتك في نفس المكان. فقط المحتوى داخل ملف page سيكون متاحًا للجمهور. على سبيل المثال، مجلدات /ui و /lib موجودة في نفس المكان داخل مجلد /app مع مساراتك.
تمرين: إنشاء صفحات لوحة التحكم
لنتدرب على إنشاء المزيد من المسارات. في لوحة التحكم الخاصة بك، أنشئ صفحتين إضافيتين:
- صفحة العملاء: يجب أن تكون الصفحة متاحة على http://localhost:3000/dashboard/customers. في الوقت الحالي، يجب أن تعيد عنصر
<p>صفحة العملاء</p>. - صفحة الفواتير: يجب أن تكون صفحة الفواتير متاحة على http://localhost:3000/dashboard/invoices. في الوقت الحالي، يجب أيضًا أن تعيد عنصر
<p>صفحة الفواتير</p>.
خذ بعض الوقت لمحاولة حل هذا التمرين، وعندما تكون جاهزًا، يمكنك توسيع القسم أدناه لرؤية الحل:
إنشاء تخطيط لوحة التحكم
تحتوي لوحات التحكم عادةً على نوع من التنقل المشترك بين عدة صفحات. في Next.js، يمكنك استخدام ملف layout.tsx خاص لإنشاء واجهة مستخدم مشتركة بين عدة صفحات. لنقم بإنشاء تخطيط لصفحات لوحة التحكم!
داخل مجلد /dashboard، أضف ملفًا جديدًا باسم layout.tsx والصق الكود التالي:
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}هناك عدة أشياء تحدث في هذا الكود، لذا دعونا نحللها:
أولاً، تقوم باستيراد مكون <SideNav /> إلى تخطيطك. أي مكونات تستوردها إلى هذا الملف ستكون جزءًا من التخطيط.
يستقبل مكون <Layout /> خاصية children. يمكن أن يكون هذا الطفل إما صفحة أو تخطيطًا آخر. في حالتك، سيتم تداخل الصفحات داخل /dashboard تلقائيًا داخل <Layout /> كما يلي:
تحقق من أن كل شيء يعمل بشكل صحيح بحفظ التغييرات والتحقق من localhost الخاص بك. يجب أن ترى ما يلي:
إحدى مزايا استخدام التخطيطات في Next.js هي أنه عند التنقل، يتم تحديث مكونات الصفحة فقط بينما لا يتم إعادة عرض التخطيط. وهذا ما يسمى التقديم الجزئي الذي يحافظ على حالة React على جانب العميل في التخطيط عند الانتقال بين الصفحات.
تخطيط الجذر
في الفصل 3، قمت باستيراد خط Inter إلى تخطيط آخر: /app/layout.tsx. كتذكير:
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}هذا ما يسمى تخطيط الجذر وهو مطلوب في كل تطبيق Next.js. أي واجهة مستخدم تضيفها إلى تخطيط الجذر ستكون مشتركة بين جميع الصفحات في تطبيقك. يمكنك استخدام تخطيط الجذر لتعديل علامات <html> و <body> الخاصة بك، وإضافة بيانات وصفية (ستتعلم المزيد عن البيانات الوصفية في فصل لاحق).
بما أن التخطيط الجديد الذي أنشأته للتو (/app/dashboard/layout.tsx) فريد لصفحات لوحة التحكم، فلا تحتاج إلى إضافة أي واجهة مستخدم إلى تخطيط الجذر أعلاه.