CSS-модули и глобальные стили

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

CSS-модули
Глобальные стили
Внешние таблицы стилей

CSS-модули

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

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

Пример

CSS-модули могут быть импортированы в любой файл внутри каталога app.

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

.dashboard {
  padding: 24px;
}

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

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

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

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

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

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

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

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

// These styles apply to every route in the application
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  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>
  )
}

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

Порядок и слияние

Next.js оптимизирует CSS во время сборки в режиме производства, автоматически разбивая (сливая) таблицы стилей. Порядок 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 { BaseButton } from './base-button'
import styles from './page.module.css'
 
export function Page() {
  return <BaseButton className={styles.primary} />
}

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

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

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

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

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

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

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/building-your-application/styling/css-modules