Next.js รองรับตัวเลือกการสไตล์ใดบ้าง?

Question

Accepted Answer

Next.js รองรับแนวทาง CSS เกือบทั้งหมดด้วยการจัดการในตัว — คุณสามารถเลือกสิ่งที่เหมาะสมกับโครงการของคุณ ## Global CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (มีขอบเขตโดยค่าเริ่มต้น) ```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 ``` แบบแผน `.module.css` จะกำหนดขอบเขตชื่อคลาสโดยอัตโนมัติ ดังนั้น `.primary` ในไฟล์หนึ่งจึงไม่เคยชนกับ `.primary` ในไฟล์อื่น — แก้ปัญหาขอบเขตกระดับโลกของ CSS โดยไม่มีรันไทม์ ## Tailwind CSS (ใช้มากทั่วไป) ```tsx export default () => ; ``` Utility-first; Next.js มีการสนับสนุน setup ระดับหนึ่ง มีความนิยมเพื่อความเร็วและความสอดคล้องกัน และจะล้างรูปแบบที่ไม่ได้ใช้โดยอัตโนมัติ ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` ใช้ได้ แต่หมายเหตุ: ไลบรารี CSS-in-JS ส่วนใหญ่เป็น **Client Components เท่านั้น** และต้องการการตั้งค่าเพิ่มเติมสำหรับ Server Components ตัวเลือก zero-runtime ที่ใหม่กว่า (vanilla-extract, Tailwind) เหมาะสมกับโมเดลที่ server-first ของ App Router มากกว่า ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## การเลือก ```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 ``` ## ทำไมถึงเรื่องนี้ Next.js ไม่บังคับให้เลือกการสไตล์ — รองรับ global CSS, scoped CSS Modules, Tailwind, Sass และ CSS-in-JS ด้วยเครื่องมือในตัว การรู้ข้อแลกเปลี่ยน (โดยเฉพาะว่า CSS-in-JS เป็น client-only ใน App Router ในขณะที่ Tailwind/CSS Modules ทำงานได้ดีกับ Server Components) ช่วยให้คุณเลือกแนวทางที่เหมาะสมกับโมเดลการเรนเดอร์