Vilka stylingalternativ stöder Next.js?

Question

Accepted Answer

Next.js stöder praktiskt taget alla CSS-metoder med inbyggd hantering — du kan välja det som passar ditt projekt. ## Global CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (scopad 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 ``` Konventionen `.module.css` scopar klassnamn automatiskt, så `.primary` i en fil kolliderar aldrig med `.primary` i en annan — löser CSS:s globala scope-problem utan runtime. ## Tailwind CSS (mycket vanligt) ```tsx export default () => ; ``` Utility-first; Next.js har förstklassig setup-support. Populär för hastighet och konsistens, och rensar automatiskt oanvända stilar. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Fungerar, men notering: de flesta CSS-in-JS-bibliotek är **endast Client Components** och behöver extra konfiguration för Server Components. Nyare zero-runtime-alternativ (vanilla-extract, Tailwind) passar bättre till App Router:s serverorienterade modell. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Val ```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 ``` ## Varför det spelar roll Next.js tvingar inte ett styling-val — det stöder global CSS, scopad CSS Modules, Tailwind, Sass och CSS-in-JS med inbyggda verktyg. Att förstå avvägningarna (särskilt att CSS-in-JS endast är Client i App Router, medan Tailwind/CSS Modules fungerar bra med Server Components) hjälper dig välja ett tillvägagångssätt som passar renderingsmodellen.