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

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

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

لإضافة ملف تنسيقات stylesheet إلى تطبيق، أدرج ملف 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} />
}

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

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

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

سمحت Next.js انطلاقًا من النسخة 9.5.4 إدراج ملف CSS من وحدات Node أو node_modules في أي مكان من تطبيقك. بينما لابد من إدراج ملفات CSS العامة مثل 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

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

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

npm install --save-dev sass

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

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

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

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

const path = require('path')

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

متغيرات Sass

تدعم Next.js متغيرات Sass المُصدَّرة من ملفات وحدات 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 ضمن شيفرة JavaScript

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

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

export default HiThere

تُجمَّع عناصر styled-jsx (إضافة التنسيقات ضمن ملف jsx) لدعم تنسيقات CSS المعزولة والمحدودة (ضمن مكوّن معين مثلًا) والهدف من ذلك دعم "شجرة CSS الخفية" shadow 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

انظر توثيق styled-jsx لمزيد من التفاصيل.

أسئلة متكررة

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

نعم، وستُحمّل شيفرة CSS في نسخة الإنتاج (عند تنفيذ الأمر next start). لكننا نحتاج في مرحلة التطوير لتقديم أفضل تجربة عمل للمطورين عن طريق تقنية التحديث السريع Fast Refresh.

انظر أيضًا

• إعدادات مخصصة للمصرّف PostCSS في Next.js

المصادر

• الصفحة Built-in CSS Support من توثيق Next.js الرسمي.