Pilihan penggayaan apa yang disokong Next.js?

Question

Accepted Answer

Next.js menyokong hampir setiap pendekatan CSS dengan penanganan bawaan — Anda dapat memilih yang paling sesuai dengan proyek. ## CSS Global ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (dibatasi secara bawaan) ```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 membatasi nama kelas, jadi `.primary` dalam satu berkas tidak akan pernah bentrok dengan `.primary` dalam berkas lain — menyelesaikan masalah ruang lingkup global CSS tanpa runtime. ## Tailwind CSS (sangat umum) ```tsx export default () => ; ``` Utility-first; Next.js memiliki dukungan penyiapan tingkat pertama. Populer karena kecepatan dan konsistensi, dan secara otomatis menghapus gaya yang tidak digunakan. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Bekerja, tetapi perhatikan: sebagian besar perpustakaan CSS-in-JS adalah **Komponen Klien saja** dan memerlukan konfigurasi tambahan untuk Komponen Server. 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 memaksa pilihan penggayaan — ia mendukung CSS global, CSS Modules yang dibatasi, Tailwind, Sass, dan CSS-in-JS dengan alat bawaan. Memahami 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.