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 (डिफ़ॉल्ट रूप से scoped) ```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 () => ; ``` Utility-first; Next.js के पास प्रथम-श्रेणी सेटअप समर्थन है। गति और स्थिरता के लिए लोकप्रिय, और यह स्वचालित रूप से अप्रयुक्त शैलियों को हटाता है। ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` काम करता है, लेकिन ध्यान दें: अधिकांश CSS-in-JS लाइब्रेरीज **केवल Client Components** हैं और Server Components के लिए अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता है। नए zero-runtime विकल्प (vanilla-extract, Tailwind) App Router के server-first मॉडल के लिए बेहतर हैं। ## 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, scoped CSS Modules, Tailwind, Sass, और अंतर्निहित टूलिंग के साथ CSS-in-JS का समर्थन करता है। ट्रेड-ऑफ़्स को जानना (विशेष रूप से कि CSS-in-JS App Router में केवल Client है, जबकि Tailwind/CSS Modules Server Components के साथ अच्छी तरह काम करते हैं) आपको एक दृष्टिकोण चुनने में मदद करता है जो रेंडरिंग मॉडल के अनुरूप हो।