ما خيارات التصميم التي يدعمها Next.js؟

Question

Accepted Answer

يدعم Next.js فعليًا كل نهج CSS مع معالجة مدمجة — يمكنك اختيار ما يناسب المشروع. ## CSS عام ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (محصور افتراضيًا) ```tsx // Button.module.css → class names are locally hashed (no collisions) import styles from "./Button.module.css"; export default () => ; // renders class like "Button_primary__a1b2" — scoped to this component ``` تصريح `.module.css` يحصر أسماء الفئات تلقائيًا، لذا لن يتعارض `.primary` في ملف واحد مع `.primary` في ملف آخر — حل مشكلة نطاق CSS العام بدون وقت التشغيل. ## Tailwind CSS (شائع جدًا) ```tsx export default () => ; ``` أداة-أولى؛ لدى Next.js دعم إعداد من الدرجة الأولى. شهير بسبب السرعة والاتساق، وينظف الأنماط غير المستخدمة تلقائيًا. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` يعمل، لكن لاحظ: معظم مكتبات CSS-in-JS هي **مكونات العميل فقط** وتحتاج إلى إعداد إضافي لمكونات الخادم. الخيارات الأحدث بدون وقت التشغيل (vanilla-extract, Tailwind) تناسب نموذج App Router الموجه بالخادم بشكل أفضل. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## الاختيار ```text Tailwind → fast, consistent, server-friendly (popular default) CSS Modules → scoped, plain CSS, no runtime, great with Server Components CSS-in-JS → dynamic styles, but client-only + more setup in App Router Global CSS/Sass → resets, base styles, design tokens ``` ## لماذا يهم لا يفرض Next.js اختيار التصميم — يدعم CSS عام، وCSS Modules محصور، وTailwind، وSass، وCSS-in-JS مع أدوات مدمجة. معرفة المقايضات (خاصة أن CSS-in-JS خاص بالعميل فقط في App Router، بينما Tailwind/CSS Modules يعملان بشكل جيد مع Server Components) يساعدك على اختيار نهج يناسب نموذج العرض.