Cén roghanna stílithe a thacaíonn Next.js leo?

Question

Accepted Answer

Tacaíonn Next.js le beagnach gach cur chuige CSS le láimhseáil ionsuite — is féidir leat a roghnú cad a bhíonn i bhfeidhm don tionscadal. ## CSS Domhanda ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (scoped de réir an bhreise) ```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 ``` Déanann an coinbhinsiún `.module.css` na hainmneacha rang a scópadh go huathoibríoch, agus mar sin ní bhíonn `.primary` i bhfíchianna amháin i gconflict riamh le `.primary` i bhfíchianna eile — réiteach an fhadhb scópa domhanda CSS gan runtime. ## Tailwind CSS (an-choitianta) ```tsx export default () => ; ``` Fóntas-ar-dtús; tá tacaíocht cumraitheoireachta den chéad scéal ag Next.js. Coitianta do bhristint agus do chomhsheasmhachta, agus scuabann sé stíleanna neamhúsáidte go huathoibríoch. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Oibreoidh sé, ach féadfaidh tú a thabhairt faoi deara: is **Client Components amháin** an chuid is mó de na leabharlanna CSS-in-JS agus teastaíonn cumraitheoireacht bhreise orthu do Chuid Fhreastalaí. Is fearr na roghanna níos nuaí gan runtime (vanilla-extract, Tailwind) don mhúnla server-first an App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## A Roghnú ```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 ``` ## Cén fáth a bhíonn sé tábhachtach Ní chuireann Next.js rogha stílithe i bhfeidhm — tacaíonn sé le CSS domhanda, CSS Modules scoped, Tailwind, Sass, agus CSS-in-JS le huirlisí ionsuite. A bheith ar eolas ar na socruithe (go háirithe gur Client Components amháin atá in CSS-in-JS san App Router, agus go n-imríonn Tailwind/CSS Modules go deas le Cuid Fhreastalaí) cabhraíonn sé leat cur chuige a roghnú a oireann don mhúnla rindreachta.