Next.js/built in css support

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

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

لإضافة ورقة تنسيقات 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} />
}

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

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

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

سمحت Next.js انطلاقًا من النسخة 9.5.4 إدراج ملف 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

تدعم 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 وتشابهها ولا تتطلب منك أن تتعلم الصياغة الإزاحية

تخصيص خيارات 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-in-JS في Next.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.

المصادر

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