Opsi styling apa yang didukung Next.js?

Question

Accepted Answer

Next.js mendukung hampir setiap pendekatan CSS dengan penanganan bawaan — Anda dapat memilih apa yang sesuai dengan proyek. ## CSS Global ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (scoped secara default) ```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` secara otomatis menjalankan scope nama kelas, jadi `.primary` dalam satu file tidak pernah bertabrakan dengan `.primary` di file lain — menyelesaikan masalah scope global CSS tanpa runtime. ## Tailwind CSS (sangat umum) ```tsx export default () => ; ``` Utility-first; Next.js memiliki dukungan setup kelas satu. Populer untuk kecepatan dan konsistensi, dan secara otomatis membersihkan gaya yang tidak digunakan. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Berfungsi, tetapi perhatikan: sebagian besar perpustakaan CSS-in-JS adalah **Client Components saja** dan memerlukan konfigurasi tambahan untuk Server Components. Opsi zero-runtime yang lebih baru (vanilla-extract, Tailwind) lebih sesuai dengan model server-first App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Memilih ```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 ini penting Next.js tidak memaksakan pilihan styling — mendukung CSS global, CSS Modules scoped, Tailwind, Sass, dan CSS-in-JS dengan tooling bawaan. Mengetahui trade-off (terutama bahwa CSS-in-JS adalah klien saja di App Router, sementara Tailwind/CSS Modules bekerja dengan baik dengan Server Components) membantu Anda memilih pendekatan yang sesuai dengan model rendering.