دعم تنسيقات 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;
}

أنشئ بعد ذلك الملف components/Button.js ثم أدرج واستخدم ملف CSS السابق:

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // كخاصية للكائن المُدرج  "error" لاحظ كيف يمكن الوصول إلى الصنف 
      // styles`.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

تُعد وحدات CSS ميزة اختيارية وتفُعّل فقط للملفات التي تنتهي بالامتداد module.css.، كما تبقى طريقة إدراج التنسيقات النمطية من خلال العنصر <link> أو ملفات CSS العامة مدعومة أيضًا.

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

دعم امتداد sass في Next.js

تسمح باستخدام لغة Sass باستخدام ملفات بأحد الامتداديين scss. و sass.. وباستخدام وحدات CSS، بإمكانك إضافة تنسيقات Sass على مستوى المكوِّن من خلال الملفات التي تنتهي بأحد الامتداديين module.scss. أو module.sass..

تأكد من تثبيت sass قبل أن تستفيد من الدعم المدمج للغة في Next.js:

npm install --save-dev sass

لهذه اللغة ميزات الدعم المدمج نفسها التي ناقشناها سابقًا لتنسيقات CSS.

ملاحظة: تدعم صيغتان قواعديتان مختلفتان ولكل منهما امتداده الخاص. إذ يتطلب منك استخدام اللاحقة استخدام صياغة SCSS بينما يتطلب استخدام اللاحقة استخدام الصياغة الإزاحية Sass. إن لم تكن متأكدًا من خياراتك، استخدم صياغة SCSS فهي مجموعة قواعد توّسع CSS وتشابهها ولا تتطلب منك أن تتعلم الصياعة الإزاحية

تخصيص خيارات Sass

بإمكانك تهيئة مصرِّف Sass -إن أردت- باستخدام الخاصية sassOptions في ملف التهيئة next.config.js. يمكنك مثلً إضافة includePaths:

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

متغيرات Sass

تدعم Next.js متغيرات المُصدَّرة من ملفات وحدات CSS. لاحظ على سبيل المثال كيف يُستخدم المتغير المُصدَّر primaryColor:

/* variables.module.scss */
$primary-color: #64FF00

:export {
  primaryColor: $primary-color
}
// pages/_app.js
import variables from '../styles/variables.module.scss'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}

التنسيق بصيغة CSS-in-JS

بالإمكان الاستفادة من أية حلول تستخدم الصياغة CSS-in-JS وأبسطها التنسيق السطري:

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}

export default HiThere

تُجمَّع عناصر styled-jsx لدعم تنسيقات CSS المعزولة والمحدودة (ضمن مكوّن معين مثلًا) والهدف من ذلك دعم "شجرة CSS الخفية" بشكل مشابه لمكوّنات ويب التي لا تدعم التصيير من جانب الخادم. يبدو المكوّن الذي يستخدم styled-jsx كالتالي:

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

أسئلة متكررة

هل تعمل CSS عندما تُعطَّل JavaScript؟

نعم، وستُحمّل شيفرة CSS في نسخة الإنتاج (next start).

لكننا نحتاج في مرحلة التطوير لتقديم أفضل تجربة عمل للمطورين عن طريق تقنية التحديث السريع Fast Refresh.