logoNext.js Русский
ДокументацияБлогИзучение
Введение/Создание приложения/Стилизация

Стилизация

Next.js поддерживает различные способы стилизации вашего приложения, включая:

  • Глобальные CSS (Global CSS): Прост в использовании и знаком тем, кто работал с традиционным CSS, но может привести к увеличению размера CSS-бандлов и усложнению управления стилями по мере роста приложения.
  • CSS-модули (CSS Modules): Позволяют создавать локально ограниченные CSS-классы, чтобы избежать конфликтов имён и улучшить поддерживаемость кода.
  • Tailwind CSS: Утилитарный CSS-фреймворк, позволяющий быстро создавать кастомные дизайны путём комбинирования утилитарных классов.
  • Sass: Популярный CSS-препроцессор, расширяющий CSS такими возможностями, как переменные, вложенные правила и миксины.
  • CSS-in-JS: Встраивание CSS непосредственно в JavaScript-компоненты, что позволяет использовать динамическую и ограниченную по области видимости стилизацию.

Подробнее о каждом подходе вы можете узнать, изучив соответствующую документацию:

CSS Modules

Стилизация приложения Next.js с использованием CSS Modules.

Tailwind CSS

Стилизация приложения Next.js с использованием Tailwind CSS.

CSS-in-JS

Использование библиотек CSS-in-JS с Next.js

Sass

Узнайте, как использовать Sass в вашем приложении Next.js.

Получение данных на стороне клиента (Client-side Fetching)

Узнайте о получении данных на стороне клиента и использовании библиотеки SWR — хука React для получения данных с кэшированием, ревалидацией, отслеживанием фокуса, повторным запросом по интервалу и другими функциями.

CSS Modules

Стилизация приложения Next.js с использованием CSS Modules.