CSS Modules

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

• CSS Modules
• Глобальные стили
• Внешние таблицы стилей

CSS Modules

Next.js имеет встроенную поддержку CSS Modules с использованием расширения .module.css.

CSS Modules локально ограничивают область видимости CSS, автоматически создавая уникальные имена классов. Это позволяет использовать одинаковые имена классов в разных файлах без риска конфликтов. Такое поведение делает CSS Modules идеальным способом включения CSS на уровне компонентов.

Пример

Например, рассмотрим переиспользуемый компонент Button в папке components/:

Сначала создайте components/Button.module.css со следующим содержимым:

/*
Вам не нужно беспокоиться о конфликте .error {} с другими файлами
`.css` или `.module.css`!
*/
.error {
  color: white;
  background-color: red;
}

Затем создайте components/Button.js, импортируя и используя вышеуказанный CSS-файл:

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // Обратите внимание, как класс "error" доступен как свойство
      // импортированного объекта `styles`.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSS Modules работают только для файлов с расширениями .module.css и .module.sass.

В production-сборке все файлы CSS Modules автоматически объединяются в несколько минифицированных и разделённых на части .css файлов. Эти .css файлы представляют горячие пути выполнения в вашем приложении, гарантируя загрузку минимально необходимого количества CSS для отрисовки приложения.

Глобальные стили

Чтобы добавить таблицу стилей в ваше приложение, импортируйте CSS-файл в pages/_app.js.

Например, рассмотрим следующую таблицу стилей с именем styles.css:

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Создайте файл pages/_app.js, если он ещё не существует. Затем импортируйте файл styles.css.

import '../styles.css'

// Этот экспорт по умолчанию обязателен в новом файле `pages/_app.js`.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Эти стили (styles.css) будут применены ко всем страницам и компонентам вашего приложения. Из-за глобальной природы таблиц стилей и во избежание конфликтов, вы можете импортировать их только внутри pages/_app.js.

В режиме разработки такой способ подключения стилей позволяет использовать их горячую перезагрузку по мере редактирования — то есть вы можете сохранять состояние приложения.

В production-сборке все CSS-файлы автоматически объединяются в один минифицированный .css файл. Порядок объединения CSS соответствует порядку импорта в файле _app.js. Особое внимание уделите импортированным JS-модулям, которые включают собственный CSS; CSS из JS-модулей будет объединён по тем же правилам порядка, что и импортированные CSS-файлы. Например:

import '../styles.css'
// CSS в ErrorBoundary зависит от глобального CSS в styles.css,
// поэтому мы импортируем его после styles.css.
import ErrorBoundary from '../components/ErrorBoundary'

export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

Внешние таблицы стилей

Next.js позволяет импортировать CSS-файлы из JavaScript-файла. Это возможно благодаря тому, что Next.js расширяет концепцию import за пределы JavaScript.

Импорт стилей из node_modules

Начиная с Next.js 9.5.4, импорт CSS-файлов из node_modules разрешён в любом месте вашего приложения.

Для глобальных таблиц стилей, таких как bootstrap или nprogress, вы должны импортировать файл внутри pages/_app.js. Например:

import 'bootstrap/dist/css/bootstrap.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Для импорта CSS, необходимого стороннему компоненту, вы можете сделать это в вашем компоненте. Например:

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

Дополнительные возможности

Next.js включает дополнительные функции для улучшения опыта работы со стилями:

• При локальном запуске с next dev, локальные таблицы стилей (глобальные или CSS Modules) используют Fast Refresh для мгновенного отражения изменений при сохранении.
• При сборке для production с next build, CSS-файлы объединяются в меньшее количество минифицированных .css файлов для уменьшения количества сетевых запросов, необходимых для загрузки стилей.
• Если вы отключите JavaScript, стили всё равно будут загружаться в production-сборке (next start). Однако JavaScript всё ещё необходим для next dev, чтобы включить Fast Refresh.