Next.js अनुक्रमे प्रत्येक CSS दृष्टिकोन अंतर्निर्मित हाताळणीसह समर्थित करते — आप आपल्या प्रकल्पात बसणारा निवडू शकता.
// app/layout.tsx — global styles imported once at the root
import "./globals.css";
styles ;
() => ;
.module.css परिपाटी क्लास नावांना स्वयंचलितपणे स्कोप करते, म्हणून एका फाइलमधील .primary दुसर्या फाइलमधील .primary शी कधीच संघर्ष होत नाही — CSS च्या वैश्विक-स्कोप समस्येचे निराकरण रनटाइमशिवाय करते.
export default () => <button className="px-4 py-2 bg-blue-600 rounded">Click</button>;
युटिलिटी-फर्स्ट; Next.js च्याकडे प्रथम-श्रेणीची सेटअप समर्थन आहे. गती आणि सुसंगततेसाठी लोकप्रिय, आणि ते अप्रयुक्त शैली स्वयंचलितपणे पूर्ण करते.
const Button = styled.button`background: blue;`; // styled-components, Emotion, etc.
काम करते, परंतु लक्ष्यात घ्या: बहुतेक CSS-in-JS लाइब्ररीज क्लायंट घटक फक्त आहेत आणि सर्व्हर घटकांसाठी अतिरिक्त कॉन्फिगरेशनची आवश्यकता आहे. नवीन शून्य-रनटाइम पर्याय (vanilla-extract, Tailwind) अॅप राउटरच्या सर्व्हर-प्रथम मॉडेलसाठी अधिक उपयुक्त आहेत.
npm install sass # then import .scss files — built-in support, no config
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 अॅप राउटरमध्ये क्लायंट-फक्त आहे, तर Tailwind/CSS Modules सर्व्हर घटकांसह चांगले काम करते) तुम्हाला रेंडरिंग मॉडेलला बसणारा दृष्टिकोन निवडण्यात मदत करते.