Стилизация с помощью CSS
Теперь поговорим о стилизации с помощью CSS.
Как вы можете заметить, наша главная страница (http://localhost:3000) уже имеет некоторые стили. Если посмотреть на структуру файлов, вы увидите папку styles с двумя CSS-файлами: глобальную таблицу стилей (global.css) и CSS-модуль (Home.module.css).
Если в вашем проекте этих файлов нет, вы можете скачать стартовый код здесь:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"CSS-модули
CSS-модули позволяют ограничивать область видимости CSS на уровне компонентов, автоматически создавая уникальные имена классов. Это позволяет использовать одинаковые имена CSS-классов в разных файлах без риска конфликтов.
Помимо CSS-модулей, вы можете стилизовать ваше Next.js-приложение различными способами, включая:
- Sass, который позволяет импортировать файлы
.cssи.scss. - Библиотеки PostCSS, такие как Tailwind CSS.
- Библиотеки CSS-in-JS, например styled-jsx, styled-components и emotion
В этом уроке мы поговорим о том, как использовать CSS-модули и Sass в Next.js. Давайте начнём!