الأنماط العامة (Global Styles)

وحدات CSS مفيدة لأنماط مستوى المكون. ولكن إذا كنت تريد تحميل بعض CSS لكل صفحة، فإن Next.js يدعم ذلك أيضًا.

لتحميل CSS العام لتطبيقك، أنشئ ملفًا باسم pages/_app.js بالمحتوى التالي:

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

التصدير الافتراضي لـ _app.js هو مكون React أعلى مستوى يلف جميع الصفحات في تطبيقك. يمكنك استخدام هذا المكون للحفاظ على الحالة عند التنقل بين الصفحات، أو لإضافة أنماط عامة كما نفعل هنا. تعرف على المزيد حول ملف _app.js.

إعادة تشغيل خادم التطوير

هام: تحتاج إلى إعادة تشغيل خادم التطوير عند إضافة pages/_app.js. اضغط على Ctrl + c لإيقاف الخادم ثم شغّل:

npm run dev

إضافة CSS العام

في Next.js، يمكنك إضافة ملفات CSS العام عن طريق استيرادها من pages/_app.js. لا يمكنك استيراد CSS العام في أي مكان آخر.

السبب في عدم إمكانية استيراد CSS العام خارج pages/_app.js هو أن CSS العام يؤثر على جميع العناصر في الصفحة.

إذا انتقلت من الصفحة الرئيسية إلى صفحة /posts/first-post، فإن الأنماط العامة من الصفحة الرئيسية ستؤثر على /posts/first-post دون قصد.

يمكنك وضع ملف CSS العام في أي مكان واستخدام أي اسم. لذا لنقم بما يلي:

• إنشاء دليل styles في المستوى الأعلى وملف global.css.
• أضف CSS التالي داخل styles/global.css. يعيد هذا الكود ضبط بعض الأنماط ويغير لون علامة a:

html,
body {
  padding: 0;
  margin: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  line-height: 1.6;
  font-size: 18px;
}
 
* {
  box-sizing: border-box;
}
 
a {
  color: #0070f3;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
img {
  max-width: 100%;
  display: block;
}

أخيرًا، استورد ملف CSS داخل ملف pages/_app.js الذي أنشأته سابقًا:

// `pages/_app.js`
import '../styles/global.css';
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

الآن، إذا قمت بالوصول إلى http://localhost:3000/posts/first-post، ستلاحظ تطبيق الأنماط. أي أنماط يتم استيرادها في _app.js سيتم تطبيقها عالميًا على جميع صفحات التطبيق.

إذا لم تعمل: تأكد من إعادة تشغيل خادم التطوير عند تحديث pages/_app.js.