عرض مصدر Next.js/built in css support

<noinclude>{{DISPLAYTITLE:دعم تنسيقات CSS المدمجة في Next.js}}</noinclude>
تتيح Next.js إدراج ملفات تنسيق [[CSS]] من خلال ملف [[JavaScript]]، وهذا ممكن لأن Next.js توسِّع مفهوم الإدراج [[JavaScript/import|<code>import</code>]] أكثر مما هو عليه في [[JavaScript]].

== إضافة تنسيقات CSS على عموم التطبيق ==
لإضافة ملف تنسيقات stylesheet إلى تطبيق، أدرج ملف CSS ضمن الملف <code>pages/_app.js</code>. ألق نظرة على ملف التنسيق التالي الذي يدعى <code>styles.css</code>:<syntaxhighlight lang="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;
}
</syntaxhighlight>أنشئ الملف [[Next.js/custom app|<code>pages/_app.js</code>]] إن لم يكن موجودًا بعد، ثم أدرج الملف <code>styles.css</code> ضمنه باستخدام <code>import</code>:<syntaxhighlight lang="javascript">
import '../styles.css'

// الجديد `pages/_app.js` هذا التصدير الافتراضي مطلوب لملف
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
</syntaxhighlight>ستُطبق قواعد التنسيق التي يضمها الملف على جميع الصفحات والمكوّنات في تطبيقك. ونظرًا للطبيعة العامة لتنسيقات CSS ولتحاشي حصول أي تعارض في تطبيقها، أدرج هذه التنسيقات ضمن الملف <code>pages/_app.js</code> فقط. 

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

=== إدراج التنسيقات من المجلد node_modules ===
سمحت Next.js انطلاقًا من النسخة 9.5.4 إدراج ملف CSS من وحدات Node أو <code>node_modules</code> في أي مكان من تطبيقك. بينما لابد من إدراج ملفات CSS العامة مثل <code>bootstrap</code> أو <code>nprogress</code> ضمن الملف <code>pages/_app.js</code>. إليك مثالًا:<syntaxhighlight lang="javascript">
// pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
</syntaxhighlight>عليك إدراج تنسيقات CSS التي يحتاج إليها مكوِّن يؤمنه طرف آخر بالشكل التالي مثلًا:<syntaxhighlight lang="javascript">
// 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>
  )
}
</syntaxhighlight>

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

لنأخذ على سبيل المثال المكوّن <code>Button</code> القابل لإعادة الإستخدام والموجود في المجلد<code>components/</code> ‎. لتطبيق وحدة CSS عليه، أنشئ الملف <code>components/Button.module.css</code> وضع فيه المحتوى التالي:<syntaxhighlight lang="css">
/* `.module.css` أو ملفات `.css` لا تقلق من التنازع الذي قد يحدث بين ملفات 
*/
.error {
  color: white;
  background-color: red;
}
</syntaxhighlight>أنشئ بعد ذلك الملف <code>components/Button.js</code> ثم أدرج واستخدم ملف CSS السابق:<syntaxhighlight lang="javascript">
import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // كخاصية للكائن المُدرج "error" لاحظ كيف يمكن الوصول إلى الصنف 
      // `styles`
      className={styles.error}
    >
      Destroy
    </button>
  )
}
</syntaxhighlight>تُعد وحدات CSS ميزة اختيارية وتفُعّل فقط في الملفات التي تنتهي بالامتداد <code>module.css.</code>، كما تبقى طريقة إدراج التنسيقات النمطية من خلال العنصر <code><link></code> أو ملفات CSS العامة مدعومة أيضًا.

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

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

تأكد من تثبيت <code>[https://github.com/sass/sass sass]</code> قبل أن تستفيد من الدعم المدمج له في Next.js: <syntaxhighlight lang="bash">
npm install --save-dev sass
</syntaxhighlight>لهذه اللغة ميزات الدعم المدمج نفسها التي ناقشناها سابقًا لتنسيقات CSS.

'''ملاحظة:''' تدعم Next.js [https://sass-lang.com/documentation/syntax صيغتان قواعديتان مختلفتان] ولكل منهما امتداده الخاص. إذ يتطلب منك استخدام اللاحقة <code>scss.</code> استخدام صياغة [[Sass#.D8.A7.D9.84.D8.B5.D9.8A.D8.A7.D8.BA.D8.A9%20.28Syntax.29|SCSS]] بينما يتطلب استخدام اللاحقة <code>sass.</code> استخدام الصياغة الإزاحية [[Sass#.D8.A7.D9.84.D8.B5.D9.8A.D8.A7.D8.BA.D8.A9%20.28Syntax.29|Sass]]. إن لم تكن متأكدًا من خياراتك، استخدم صياغة SCSS فهي مجموعة قواعد توّسع CSS وتشابهها ولا تتطلب منك أن تتعلم الصياغة الإزاحية Indented Syntax.
=== تخصيص خيارات Sass ===
بإمكانك تهيئة مصرِّف Sass -إن أردت- باستخدام الخاصية <code>sassOptions</code> في ملف التهيئة <code>next.config.js</code>. يمكنك مثلًا إضافة <code>includePaths</code>:<syntaxhighlight lang="javascript">
const path = require('path')

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

=== متغيرات Sass ===
تدعم Next.js متغيرات Sass المُصدَّرة من ملفات وحدات CSS. لاحظ على سبيل المثال كيف يُستخدم المتغير المُصدَّر <code>primaryColor</code>:<syntaxhighlight lang="sass">
/* 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>
  )
}
</syntaxhighlight>

== التنسيق بكتابة تعليمات CSS ضمن شيفرة JavaScript ==
بالإمكان الاستفادة من أية حلول تستخدم الصياغة CSS-in-JS أي كتابة تعليمات CSS ضمن شيفرة JavaScript وأبسطها التنسيق السطري:<syntaxhighlight lang="javascript">
function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}

export default HiThere
</syntaxhighlight>تُجمَّع عناصر styled-jsx (إضافة التنسيقات ضمن ملف jsx) لدعم تنسيقات CSS المعزولة والمحدودة (ضمن مكوّن معين مثلًا) والهدف من ذلك دعم "شجرة CSS الخفية" shadow CSS بشكل مشابه لمكوّنات ويب التي لا تدعم التصيير من جانب الخادم. يبدو المكوّن الذي يستخدم أسلوب styled-jsx كالتالي:<syntaxhighlight lang="javascript">
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
</syntaxhighlight>انظر توثيق [https://github.com/vercel/styled-jsx styled-jsx] لمزيد من التفاصيل.

== أسئلة متكررة ==

=== هل تعمل تعليمات CSS عندما تُعطَّل JavaScript؟ ===
نعم، وستُحمّل شيفرة CSS في نسخة الإنتاج (عند تنفيذ الأمر <code>next start</code>). لكننا نحتاج في مرحلة التطوير لتقديم أفضل تجربة عمل للمطورين عن طريق تقنية التحديث السريع [[Next.js/fast refresh|Fast Refresh]].

== انظر أيضًا ==

* [[Next.js/customizing postcss config|إعدادات مخصصة للمصرّف PostCSS في Next.js]]

== المصادر ==

* الصفحة [https://nextjs.org/docs/basic-features/built-in-css-support Built-in CSS Support] من توثيق Next.js الرسمي.