Milyen stílus-beállításokat támogat a Next.js?

Question

Accepted Answer

A Next.js beépített kezeléssel szinte minden CSS-megközelítést támogat — választhatod azt, ami megfelel a projektednek. ## Globális CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (alapértelmezés szerint hatókörrel) ```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 ``` A `.module.css` konvenció automatikusan hatóköri osztályneveket, így az egyik fájlban lévő `.primary` soha nem ütközik egy másik fájl `.primary` értékével — megoldja a CSS globális hatóköri problémáját futásidő nélkül. ## Tailwind CSS (nagyon gyakori) ```tsx export default () => ; ``` Utility-first; a Next.js-nek első osztályú beállítás-támogatása van. Népszerű a sebesség és konzisztencia miatt, és automatikusan eltávolítja az fel nem használt stílusokat. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Működik, de vedd figyelembe: a legtöbb CSS-in-JS könyvtár **csak Client Components** és további konfigurációra van szükségük a Server Components számára. Az újabb zero-runtime lehetőségek (vanilla-extract, Tailwind) jobban megfelelnek az App Router szerver-first modelljének. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Választás ```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 ``` ## Miért fontos ez A Next.js nem kényszerít rá egy stílus választást — támogatja a globális CSS-t, hatóköri CSS Modules-t, Tailwind-et, Sass-t és CSS-in-JS-t beépített eszközökkel. A kompromisszumok ismerete (különösen hogy a CSS-in-JS az App Router-ben csak kliens, míg a Tailwind/CSS Modules szép összhangban működnek a Server Components-ekkel) segít egy olyan megközelítést választani, amely megfelel a renderelési modellnek.