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. Обычные таблицы стилей <link> и глобальные CSS-файлы по-прежнему поддерживаются.

В 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 включает дополнительные функции для улучшения опыта работы со стилями:

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

Пример

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

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

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

On this page