CSS Modules и глобальные стили

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

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

CSS Modules

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

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

Пример

CSS Modules можно импортировать в любой файл внутри директории app:

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

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}

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

export default function DashboardLayout({ children }) {
  return <section className={styles.dashboard}>{children}</section>
}

app/dashboard/styles.module.css

.dashboard {
  padding: 24px;
}

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

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

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

Глобальные стили можно импортировать в любой layout, страницу или компонент внутри директории app.

Важно знать: Это отличается от директории pages, где глобальные стили можно импортировать только внутри файла _app.js.

Например, рассмотрим таблицу стилей с именем app/global.css:

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

В корневом layout (app/layout.js) импортируйте таблицу стилей global.css, чтобы применить стили ко всем маршрутам вашего приложения:

// Эти стили применяются ко всем маршрутам приложения
import './global.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// Эти стили применяются ко всем маршрутам приложения
import './global.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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

Таблицы стилей, опубликованные внешними пакетами, можно импортировать в любом месте директории app, включая колокализованные компоненты:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

Важно знать: Внешние таблицы стилей должны быть импортированы напрямую из npm-пакета или загружены и размещены вместе с вашей кодовой базой. Вы не можете использовать <link rel="stylesheet" />.

Порядок и объединение

Next.js оптимизирует CSS во время production-сборки, автоматически разделяя (объединяя) таблицы стилей. Порядок CSS определяется порядком, в котором вы импортируете таблицы стилей в код вашего приложения.

Например, base-button.module.css будет упорядочен перед page.module.css, так как <BaseButton> импортируется первым в <Page>:

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

import { BaseButton } from './base-button'
import styles from './page.module.css'

export function Page() {
  return <BaseButton className={styles.primary} />
}

import { BaseButton } from './base-button'
import styles from './page.module.css'

export function Page() {
  return <BaseButton className={styles.primary} />
}

Для поддержания предсказуемого порядка мы рекомендуем следующее:

Импортируйте CSS-файл только в один JS/TS файл.
- Если используете глобальные имена классов, импортируйте глобальные стили в том же файле в желаемом порядке применения.
Предпочитайте CSS Modules глобальным стилям.
- Используйте единообразное соглашение по именованию для ваших CSS Modules. Например, используйте <name>.module.css вместо <name>.tsx.
Выносите общие стили в отдельный общий компонент.
Если используете Tailwind, импортируйте таблицу стилей в начале файла, предпочтительно в Root Layout.

Важно знать: Порядок CSS ведёт себя по-разному в режиме разработки, всегда проверяйте preview-деплойменты, чтобы убедиться в окончательном порядке CSS в production-сборке.

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

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

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