Opsi styling apa sing disengkeri Next.js?

Question

Accepted Answer

Next.js nyengkeri praktis saben pendekatan CSS kanthi panganan sing wis kasedhiya — sampeyan bisa milih sing cocok karo proyek. ## CSS Global ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (scope sacara otomatis) ```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 ``` Konvensi `.module.css` ngawe scope nama kelas kanthi otomatis, saengga `.primary` ing satunggal berkas ora bakal bentrok karo `.primary` ing berkas liyane — ngrungkelan masalah global-scope CSS tanpa runtime. ## Tailwind CSS (umum banget) ```tsx export default () => ; ``` Utility-first; Next.js nduweni dukungan setup tingkat pisanan. Misale kanggo kecepatan lan konsistensi, lan mbusak gaya sing ora digunakake kanthi otomatis. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Nanggung-nanggung, nanging cathetan: akeh perpustakaan CSS-in-JS sing **Client Components wae** lan butuh konfigurasi ekstra kanggo Server Components. Pilihan zero-runtime anyar (vanilla-extract, Tailwind) luwih cocok karo model server-first App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Milih ```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 ``` ## Mengapa penting Next.js ora meksa pilihan styling — iku nyengkeri CSS global, CSS Modules sing punya scope, Tailwind, Sass, lan CSS-in-JS kanthi alat sing wis kasedhiya. Ngerti tradeoff (luwih-luwih CSS-in-JS sing client-only ing App Router, nalika Tailwind/CSS Modules bisa cocok karo Server Components) mbantu sampeyan pilih pendekatan sing cocok karo model rendering.