Mitä tyyliä asetuksia Next.js tukee?

Question

Accepted Answer

Next.js tukee käytännössä jokaista CSS-lähestymistapaa sisäänrakennetulla käsittelyllä — voit valita, mikä sopii projektillesi. ## Globaali CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (laajuusrajattu oletuksena) ```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`-sopimus rajaa luokkanimien laajuuden automaattisesti, joten `.primary` yhdessä tiedostossa ei koskaan törmää `.primary`:iin toisessa tiedostossa — ratkaisee CSS:n globaalin laajuuden ongelman ilman runtime-välimiespalvelua. ## Tailwind CSS (hyvin yleinen) ```tsx export default () => ; ``` Hyötyjen ensimmäinen; Next.js:llä on ensimmäisen luokan asennustuki. Suosittu nopeuden ja johdonmukaisuuden vuoksi, ja se puhdistaa automaattisesti käyttämättömiä tyylejä. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Toimii, mutta huomaa: useimmat CSS-in-JS-kirjastot ovat **vain Client Components** ja vaativat lisämääritysten palvelimeen Components. Uudemmat zero-runtime-vaihtoehdot (vanilla-extract, Tailwind) sopivat paremmin App Routerin palvelimeen suuntautuneeseen malliin. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Valitseminen ```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 ``` ## Miksi tämä on tärkeää Next.js ei pakota tyyliä — se tukee globaalia CSS:ää, laajuusrajattuja CSS Modules -moduuleita, Tailwindia, Sassia ja CSS-in-JS:ää sisäänrakennetuilla työkaluilla. Kompromissien tunteminen (erityisesti se, että CSS-in-JS on vain asiakaspuoli App Routerissa, kun taas Tailwind/CSS Modules toimivat hyvin palvelimen komponenttien kanssa) auttaa sinua valitsemaan lähestymistavan, joka sopii käyttöön ottamisen malliisi.