Hvilke stileringsalternativer støtter Next.js?

Question

Accepted Answer

Next.js støtter praktisk talt alle CSS-tilnærminger med innebygd håndtering — du kan velge hva som passer prosjektet ditt. ## Globalt CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (begrenset som standard) ```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`-konvensjonen begrenser klassenavn automatisk, så `.primary` i en fil aldri kolliderer med `.primary` i en annen — og løser CSSs globale omfangsproblem uten runtime-overhead. ## Tailwind CSS (veldig vanlig) ```tsx export default () => ; ``` Utility-first; Next.js har første-klasses setupstøtte. Populært for hastighet og konsistens, og det fjerner ubrukte stiler automatisk. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Fungerer, men merk: de fleste CSS-in-JS-biblioteker er **kun klientkomponenter** og krever ekstra konfigurering for serverkomponenter. Nyere zero-runtime-alternativer (vanilla-extract, Tailwind) passer bedre til App Routers server-first-modell. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Valg ```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 ``` ## Hvorfor det er viktig Next.js tvinger ikke et stileringskvalg — det støtter globalt CSS, begrenset CSS Modules, Tailwind, Sass og CSS-in-JS med innebygd verktøy. Å kjenne avveiingene (spesielt at CSS-in-JS bare er klientsiden i App Router, mens Tailwind/CSS Modules fungerer bra med serverkomponenter) hjelper deg med å velge en tilnærming som passer gjengivelsesmodellen.