Next.js hỗ trợ những tùy chọn styling nào?

Question

Accepted Answer

Next.js hỗ trợ gần như mọi cách tiếp cận CSS với xử lý sẵn có — bạn có thể chọn cái phù hợp với project. ## Global CSS ```tsx // app/layout.tsx — global styles được import một lần ở root import "./globals.css"; ``` ## CSS Modules (scoped mặc định) ```tsx // Button.module.css → tên class được hash cục bộ (không xung đột) import styles from "./Button.module.css"; export default () => ; // render ra class kiểu "Button_primary__a1b2" — scoped trong component này ``` Quy ước `.module.css` tự động scope tên class, nên `.primary` trong một file không bao giờ đụng với `.primary` trong file khác — giải quyết vấn đề global-scope của CSS mà không cần runtime. ## Tailwind CSS (rất phổ biến) ```tsx export default () => ; ``` Utility-first; Next.js hỗ trợ thiết lập hạng nhất. Phổ biến vì tốc độ và tính nhất quán, và nó tự động loại bỏ các style không dùng. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, v.v. ``` Hoạt động được, nhưng lưu ý: hầu hết thư viện CSS-in-JS **chỉ dùng cho Client Components** và cần cấu hình thêm cho Server Components. Các tùy chọn zero-runtime mới hơn (vanilla-extract, Tailwind) hợp với mô hình server-first của App Router hơn. ## Sass ```bash npm install sass # rồi import các file .scss — hỗ trợ sẵn, không cần cấu hình ``` ## Chọn lựa ```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 ``` ## Tại sao điều này quan trọng Next.js không ép buộc một lựa chọn styling — nó hỗ trợ global CSS, CSS Modules có scope, Tailwind, Sass và CSS-in-JS với tooling sẵn có. Biết các đánh đổi (đặc biệt là CSS-in-JS chỉ dùng được ở client trong App Router, trong khi Tailwind/CSS Modules hợp tốt với Server Components) giúp bạn chọn một cách tiếp cận phù hợp với mô hình rendering.