Ποιες επιλογές styling υποστηρίζει το Next.js;

Question

Accepted Answer

Το Next.js υποστηρίζει πρακτικά κάθε προσέγγιση CSS με ενσωματωμένη επεξεργασία — μπορείς να επιλέξεις αυτό που ταιριάζει στο έργο. ## Παγκόσμιο 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 χωρίς runtime. ## Tailwind CSS (πολύ κοινό) ```tsx export default () => ; ``` Πρώτο χρησιμοποιούμενο; το Next.js έχει υποστήριξη εγκατάστασης πρώτης κατηγορίας. Δημοφιλές για ταχύτητα και συνέπεια, και καθαρίζει αχρησιμοποίητα στυλ αυτόματα. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Λειτουργεί, αλλά προσοχή: οι περισσότερες βιβλιοθήκες CSS-in-JS είναι **μόνο Client Components** και χρειάζονται πρόσθετη ρύθμιση για Server Components. Νεότερες επιλογές χωρίς runtime (vanilla-extract, Tailwind) ταιριάζουν καλύτερα με το μοντέλο με προτεραιότητα διακομιστή του 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 δεν επιβάλλει μια επιλογή styling — υποστηρίζει παγκόσμιο CSS, CSS Modules με εύρος, Tailwind, Sass και CSS-in-JS με ενσωματωμένα εργαλεία. Γνώση των αντιθέσεων (ειδικά ότι το CSS-in-JS είναι μόνο στην πλευρά του πελάτη στο App Router, ενώ το Tailwind/CSS Modules λειτουργούν καλά με Server Components) σας βοηθά να επιλέξετε μια προσέγγιση που ταιριάζει στο μοντέλο απόδοσης σας.