Какие возможности стилизации поддерживает 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 без затрат на время выполнения. ## Tailwind CSS (очень популярно) ```tsx export default () => ; ``` Utility-first; Next.js имеет встроенную поддержку настройки. Популярен благодаря скорости и согласованности, и автоматически удаляет неиспользуемые стили. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Работает, но помните: большинство библиотек CSS-in-JS **только для клиентских компонентов** и требуют дополнительной конфигурации для серверных компонентов. Более новые варианты с нулевым временем выполнения (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 не навязывает выбор стиля — он поддерживает глобальный CSS, ограниченные области видимости CSS Modules, Tailwind, Sass и CSS-in-JS со встроенными инструментами. Знание компромиссов (особенно того, что CSS-in-JS работает только на клиенте в App Router, в то время как Tailwind/CSS Modules хорошо работают с серверными компонентами) помогает выбрать подход, который соответствует модели рендеринга.