Советы по стилизации

Вот несколько советов по стилизации, которые могут оказаться полезными.

Вы можете просто просмотреть следующие разделы. Нет необходимости вносить изменения в наше приложение!

Использование библиотеки clsx для переключения классов

clsx — это простая библиотека, которая позволяет легко переключать имена классов. Её можно установить с помощью npm install clsx или yarn add clsx.

Ознакомьтесь с её документацией для получения более подробной информации, но вот базовый пример использования:

• Предположим, вы хотите создать компонент Alert, который принимает type со значениями 'success' или 'error'.
• Если тип 'success', текст должен быть зелёным. Если 'error' — красным.

Сначала можно написать CSS-модуль (например, alert.module.css) следующим образом:

.success {
  color: green;
}
.error {
  color: red;
}

А затем использовать clsx так:

import styles from './alert.module.css';
import { clsx } from 'clsx';
 
export default function Alert({ children, type }) {
  return (
    <div
      className={clsx({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >
      {children}
    </div>
  );
}

Настройка конфигурации PostCSS

Без дополнительной настройки Next.js компилирует CSS с помощью PostCSS.

Для настройки PostCSS можно создать файл postcss.config.js в корне проекта. Это полезно при использовании библиотек, таких как Tailwind CSS.

Вот шаги для добавления Tailwind CSS. Сначала установите пакеты:

npm install -D tailwindcss autoprefixer postcss

Затем создайте файл postcss.config.js:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Также рекомендуется настроить источники контента, указав параметр content в tailwind.config.js:

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // Для лучшей производительности и избежания ложных срабатываний
    // укажите пути к контенту как можно более конкретно.
  ],
};

Чтобы узнать больше о настройке PostCSS, ознакомьтесь с документацией PostCSS.

Для быстрого старта с Tailwind CSS изучите наш пример.

Использование Sass

Next.js поддерживает импорт Sass с расширениями .scss и .sass без дополнительной настройки. Можно использовать Sass на уровне компонентов через CSS-модули с расширениями .module.scss или .module.sass.

Перед использованием встроенной поддержки Sass в Next.js убедитесь, что установлен пакет sass:

npm install -D sass

Это всё для данного урока!

Чтобы узнать больше о встроенной поддержке CSS и CSS-модулях в Next.js, ознакомьтесь с документацией по CSS.