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` કન્વેન્શન ક્લાસ નામોને આપમેળે scope કરે છે, તેથી એક ફાઇલમાં `.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, scoped CSS Modules, Tailwind, Sass, અને CSS-in-JS બિલ્ટ-ઇન ટૂલિંગ સાથે સમર્થન આપે છે। ટ્રેડ-ઑફ્સ જાણવું (ખાસ કરીને કે CSS-in-JS App Router માં માત્ર ક્લાયંટ-એક્સક્લુસિવ છે, જ્યારે Tailwind/CSS Modules Server Components સાથે સુંદર રીતે કાર્ય કરે છે) તમને એક અભિગમ પસંદ કરવામાં મદદ કરે છે જે રેન્ડરિંગ મોડેલને ફિટ કરે છે.