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 కోసం అतిరిక్త కాన్ఫిగరేషన్ అవసరం. నిర్మూలక జీరో-రన్‌టైమ్ ఆప్షన్‌లు (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-లతో బాగా పనిచేస్తాయని) రెండరింగ్ మోడల్‌కు సరిపోయే విధానాన్ని ఎంచుకోవడానికి మీకు సహాయం చేస్తుంది.