Использование CSS-in-JS библиотек

Можно использовать любое существующее решение CSS-in-JS. Самое простое — встроенные стили:

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}

export default HiThere

Мы включаем styled-jsx для поддержки изолированных CSS с ограниченной областью видимости. Цель — поддержать "теневой CSS", аналогичный Web Components, которые, к сожалению, не поддерживают серверный рендеринг и работают только с JS.

См. выше примеры других популярных решений CSS-in-JS (например, Styled Components).

Компонент с использованием styled-jsx выглядит так:

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

Дополнительные примеры см. в документации styled-jsx.

Отключение JavaScript

Да, если вы отключите JavaScript, CSS все равно будет загружаться в production-сборке (next start). Во время разработки нам требуется включенный JavaScript для обеспечения наилучшего опыта разработчика с Быстрым Обновлением.