دعم تنسيقات CSS المدمجة في Next.js

تتيح إدراج ملفات تنسيق CSS من خلال ملف JavaScript، وهذا ممكن لأن توسِّع مفهوم الإدراج import أكثر مما هو عليه في JavaScript.

إضافة ورقة تنسيقات مورَّثة عامة

لإضافة ورقة تنسيقات إلى تطبيق، أدرج ملف CSS ضمن الملف pages/_app.js. لنلق نظرة على ورقة التنسيق المورَّث التي تُدعى styles.css:

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

إنشئ الملف pages/_app.js إن لم يكن موجودًا بعد ثم أدرج الملف styles.css ضمنه باستخدام import:

import '../styles.css'

// الجديد `pages/_app.js` هذا التصدير الافتراضي مطلوب لملف.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

ستُطبق قواعد التنسيق التي يضمها الملف على جميع الصفحات و المكوّنات في تطبيقك. ونظرًا للطبيعة العامة للتنسيقات المورَّثة ولتحاشي النزاعات في تطبيقها لا يمكن إدراج هذه التنسيقات إلا ضمن الملف pages/_app.js.

يتيح لك التعبير عن التنسيقات بهذا الشكل في مرحلة التطوير أن يُعاد تحميلها مباشرة بمجرد تعديلها، وبالتالي سيُحافظ التطبيق على حالته. وتُوضع جميع ملفات CSS تلقائيًا خلال مرحلة الإنتاج في ملف css. واحد مصغّر.

إدراج التنسيقات من node_modules

انطلاقًا من النسخة 9.5.4، سمحت Next.js بإدراج ملف CSS من وحدات Node أو node_modules في أي مكان من تطبيقك. بينما لابد من إدراج أوراق التنسيق المورَّرثة العامة مثل bootstrap أو nprogress ضمن الملف pages/_app.js. إليك مثالًا:

// pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'

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

عليك إدراج تنسيقات CSS التي يحتاجها مكوِّن يؤمنه طرف آخر بالشكل التالي مثلًا:

// components/ExampleDialog.js
import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

إضافة تنسيقات CSS على مستوى المكوّنات

تدعم Next.js وحدات CSS من خلال الصيغة التالية في تسمية الملفات ‎[name].module.css وحدات CSS. تغطي وحدات CSS تطبيق قواعد التنسيق محليًا وبشكل تلقائي عن طريق إنشاء أسماء فريدة للأصناف. يسمح ذلك بتطبيق نفس أصناف CSS في ملفات مختلفة دون أن يحدث أي تضارب، وهذا ما يجعل من هذه الوحدات الطريقة المثالية لإضافة تنسيقات على مستوى المكوّن. يمكن غدراج ملفات وحدات CSS في أي مكان من التطبيق.

لنأخذ على سبيل المثال المكوّن Button القابل لإعادة الإستخدام والموجود في المجلدcomponents/ ‎. لتطبيق وحدة CSS عليه، أنشئ الملف components/Button.module.css وضع فيه المحتوى التالي:

/* `.module.css` أو ملفات `.css` لا تقلق من التنازع الذي قد يحدث بي ملفات 
*/
.error {
  color: white;
  background-color: red;
}