Next.js hangi stil seçeneklerini destekler?

Question

Accepted Answer

Next.js, yerleşik işleme ile pratik olarak her CSS yaklaşımını destekler — projenize uyan olanı seçebilirsiniz. ## Global CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (varsayılan olarak kapsamlı) ```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` kuralı, sınıf adlarını otomatik olarak kapsamlandırır, bu nedenle bir dosyadaki `.primary` asla başka bir dosyadaki `.primary` ile çakışmaz — CSS'nin global kapsam sorununu çalışma zamanı olmadan çözer. ## Tailwind CSS (çok yaygın) ```tsx export default () => ; ``` Utility-first; Next.js'in birinci sınıf kurulum desteği vardır. Hız ve tutarlılık için popüler ve kullanılmayan stilleri otomatik olarak temizler. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Çalışır, ancak not: çoğu CSS-in-JS kitaplığı **yalnızca Client Components** olur ve Server Components için ek yapılandırma gerekir. Daha yeni sıfır-çalışma zamanı seçenekleri (vanilla-extract, Tailwind), App Router'ın server-first modeline daha iyi uyar. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Seçim ```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 ``` ## Neden önemli Next.js bir stil seçimini zorlama yağmıyor — global CSS, kapsamlı CSS Modules, Tailwind, Sass ve CSS-in-JS'i yerleşik araçlarla destekler. Dengeleri bilmek (özellikle CSS-in-JS'in App Router'da yalnızca client olması, Tailwind/CSS Modules ise Server Components'le iyi çalışması), oluşturma modeline uygun bir yaklaşım seçmenize yardımcı olur.