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 लाइब्रेरीहरु **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, स्कोपड CSS Modules, Tailwind, Sass, र CSS-in-JS लाई अंतर्निर्मित उपकरणहरु सहित समर्थन गर्छ। ट्रेड-अफहरु जान्नु (विशेष गरी कि CSS-in-JS App Router मा client-only छ, जबकि Tailwind/CSS Modules Server Components सँग राम्ररी काम गर्छ) तपाईंलाई रेन्डरिङ मोडेलमा फिट हुने दृष्टिकोण छान्न मद्दत गर्छ।