مكون التخطيط (Layout Component)
أولاً، لننشئ مكون التخطيط الذي سيتم مشاركته عبر جميع الصفحات.
- أنشئ مجلدًا رئيسيًا باسم
components. - داخل مجلد
components، أنشئ ملفًا باسمlayout.jsبالمحتوى التالي:
export default function Layout({ children }) {
return <div>{children}</div>;
}ثم، افتح ملف pages/posts/first-post.js، وأضف استيرادًا لمكون Layout، واجعله المكون الخارجي:
import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';
export default function FirstPost() {
return (
<Layout>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</Layout>
);
}إضافة CSS
الآن، لنضيف بعض الأنماط إلى مكون التخطيط. للقيام بذلك، سنستخدم وحدات CSS، والتي تتيح لك استيراد ملفات CSS في مكون React.
أنشئ ملفًا باسم components/layout.module.css بالمحتوى التالي:
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}هام: لاستخدام وحدات CSS، يجب أن ينتهي اسم ملف CSS بـ
.module.css.
لاستخدام فئة container داخل components/layout.js، تحتاج إلى:
- استيراد ملف CSS وتعيين اسم له، مثل
styles - استخدام
styles.containerكـclassName
افتح components/layout.js واستبدل محتواه بما يلي:
import styles from './layout.module.css';
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>;
}إذا انتقلت الآن إلى http://localhost:3000/posts/first-post، يجب أن ترى أن النص أصبح داخل حاوية متمركزة:
إنشاء أسماء فئات فريدة تلقائيًا
الآن، إذا ألقيت نظرة على HTML في أدوات المطور بالمتصفح، ستلاحظ أن div الذي يُقدمه مكون التخطيط لديه اسم فئة يبدو مثل layout_container__...:
هذا ما تفعله وحدات CSS: إنها تنشئ تلقائيًا أسماء فئات فريدة. طالما تستخدم وحدات CSS، فلا داعي للقلق بشأن تعارض أسماء الفئات.
علاوة على ذلك، تعمل ميزة تقسيم الكود (code splitting) في Next.js مع وحدات CSS أيضًا. فهي تضمن تحميل الحد الأدنى من CSS لكل صفحة. وهذا يؤدي إلى أحجام حزم أصغر.
يتم استخراج وحدات CSS من حزم JavaScript أثناء وقت البناء وتنشئ ملفات .css التي يتم تحميلها تلقائيًا بواسطة Next.js.