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

CSS Modules полезны для стилей на уровне компонентов. Но если вам нужно, чтобы некоторые CSS-правила загружались для каждой страницы, Next.js также поддерживает эту возможность.

Чтобы добавить глобальные CSS-стили в ваше приложение, создайте файл pages/_app.js со следующим содержимым:

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Экспорт по умолчанию из _app.js — это компонент React верхнего уровня, который оборачивает все страницы вашего приложения. Вы можете использовать этот компонент для сохранения состояния при переходе между страницами или для добавления глобальных стилей, как мы делаем здесь. Подробнее о файле _app.js.

Перезапуск сервера разработки

Важно: При добавлении pages/_app.js необходимо перезапустить сервер разработки. Нажмите Ctrl + c, чтобы остановить сервер, и выполните:

npm run dev

Добавление глобальных CSS-стилей

В Next.js вы можете добавить глобальные CSS-файлы, импортировав их в pages/_app.js. Вы не можете импортировать глобальные CSS-стили где-либо ещё.

Причина, по которой глобальные CSS-стили нельзя импортировать вне pages/_app.js, заключается в том, что они влияют на все элементы страницы.

Если вы перейдёте с домашней страницы на страницу /posts/first-post, глобальные стили с домашней страницы могут непреднамеренно повлиять на /posts/first-post.

Вы можете разместить глобальный CSS-файл в любом месте и дать ему любое имя. Давайте сделаем следующее:

• Создайте корневую директорию styles и файл global.css.
• Добавьте следующий CSS-код в styles/global.css. Этот код сбрасывает некоторые стили и изменяет цвет тега a:

html,
body {
  padding: 0;
  margin: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  line-height: 1.6;
  font-size: 18px;
}
 
* {
  box-sizing: border-box;
}
 
a {
  color: #0070f3;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
img {
  max-width: 100%;
  display: block;
}

Наконец, импортируйте CSS-файл в ранее созданный файл pages/_app.js:

// `pages/_app.js`
import '../styles/global.css';
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Теперь, если вы перейдёте по адресу http://localhost:3000/posts/first-post, вы увидите, что стили применены. Любые стили, импортированные в _app.js, будут применяться глобально ко всем страницам приложения.

Если не работает: Убедитесь, что вы перезапустили сервер разработки после обновления pages/_app.js.