Использование CSS в вашем приложении

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

CSS Modules
Global CSS
Внешние таблицы стилей
Tailwind CSS
Sass
CSS-in-JS

CSS Modules

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

Чтобы начать использовать CSS Modules, создайте новый файл с расширением .module.css и импортируйте его в любой компонент внутри директории app:

app/blog/blog.module.css

.blog {
  padding: 24px;
}

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

export default function Page() {
  return <main className={styles.blog}></main>
}

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

export default function Layout() {
  return <main className={styles.blog}></main>
}

Global CSS

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

Создайте файл app/global.css и импортируйте его в корневой layout, чтобы применить стили ко всем маршрутам вашего приложения:

app/global.css

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

// Эти стили применяются ко всем маршрутам приложения
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>
  )
}

Важно: Глобальные стили можно импортировать в любой layout, страницу или компонент внутри директории app. Однако, поскольку Next.js использует встроенную поддержку таблиц стилей React для интеграции с Suspense, в настоящее время стили не удаляются при переходе между маршрутами, что может привести к конфликтам. Рекомендуется использовать глобальные стили только для действительно глобального CSS, а для ограниченных стилей — CSS Modules.

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

Таблицы стилей, опубликованные внешними пакетами, можно импортировать в любом месте директории 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>
  )
}

Важно: В React 19 также можно использовать <link rel="stylesheet" href="..." />. Подробнее см. в документации React link.

Порядок и объединение стилей

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

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

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

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

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

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

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} />
}

Разработка vs Продакшен

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

Использование CSS в вашем приложении

CSS Modules

Global CSS

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

Порядок и объединение стилей

Рекомендации

Разработка vs Продакшен

Tailwind CSS

Sass

CSS-in-JS

On this page