Jakie opcje stylizacji obsługuje Next.js?

Question

Accepted Answer

Next.js obsługuje praktycznie każde podejście CSS z wbudowaną obsługą — możesz wybrać to, co pasuje do Twojego projektu. ## Global CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (domyślnie ograniczone do zakresu) ```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 ``` Konwencja `.module.css` automatycznie ogranicza nazwy klas do zakresu, więc `.primary` w jednym pliku nigdy nie koliduje z `.primary` w innym — rozwiązując problem globalnego zakresu CSS bez nakładu runtime. ## Tailwind CSS (bardzo powszechne) ```tsx export default () => ; ``` Utility-first; Next.js ma wsparcie konfiguracji pierwszej klasy. Popularne ze względu na szybkość i spójność, i automatycznie usuwa nieużywane style. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Działa, ale uwaga: większość bibliotek CSS-in-JS to **tylko komponenty klienta** i wymagają dodatkowej konfiguracji dla komponentów serwera. Nowsze opcje zero-runtime (vanilla-extract, Tailwind) lepiej pasują do modelu opartego na serwerze App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Dlaczego to ważne ```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 ``` ## Dlaczego to ważne Next.js nie zmusza do wyboru stylizacji — obsługuje globalny CSS, ograniczone do zakresu CSS Modules, Tailwind, Sass i CSS-in-JS z wbudowanymi narzędziami. Znajomość kompromisów (szczególnie że CSS-in-JS jest tylko po stronie klienta w App Router, podczas gdy Tailwind/CSS Modules współpracują dobrze z komponentami serwera) pomaga wybrać podejście, które pasuje do modelu renderowania.