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

В Next.js есть два основных способа писать обычный CSS. Глобальные стили действуют на весь сайт: шрифты, цвета, отступы body. CSS-модули относятся к одному компоненту: имена классов в них автоматически делаются уникальными, поэтому .title в одном компоненте не испортит .title в другом.

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

Файл app/globals.css уже есть и подключён в корневом макете строкой import './globals.css'. Допишите в него базовые правила:

/* app/globals.css */
body {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  line-height: 1.6;
}
 
a {
  color: #2563eb;
}

Обновите любую страницу: текст встанет колонкой по центру, ссылки станут синими.

CSS-модуль

Файл модуля называется с окончанием .module.css и лежит рядом с компонентом. Сделаем карточку статьи. Создайте components/PostCard.module.css:

/* components/PostCard.module.css */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
 
.title {
  margin: 0 0 8px;
}

И сам компонент components/PostCard.tsx:

// components/PostCard.tsx
import Link from 'next/link';
import styles from './PostCard.module.css';
 
export default function PostCard({ slug, title }: { slug: string; title: string }) {
  return (
    <article className={styles.card}>
      <h2 className={styles.title}>
        <Link href={`/posts/${slug}`}>{title}</Link>
      </h2>
    </article>
  );
}

Импорт возвращает объект: ключи — имена классов из файла, значения — уникальные имена вроде PostCard_card__x7Ab2.

Использование карточки

// app/posts/page.tsx (фрагмент)
import PostCard from '@/components/PostCard';
 
{posts.map((post) => (
  <PostCard key={post.slug} slug={post.slug} title={post.title} />
))}

На /posts каждая статья окажется в рамке со скруглёнными углами.

Когда что использовать

Несколько классов из модуля объединяют шаблонной строкой: className={`${styles.card} ${styles.active}`}.

Частая ошибка

Импортировать обычный файл .css, не модуль, из компонента и писать в нём классы вроде .title. Такие стили глобальные: они применятся ко всем элементам с этим классом на сайте и начнут конфликтовать. Для стилей компонента всегда используйте имя Имя.module.css.