CSS-in-JS

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

function HiThere() {
  return <p style={{ color: 'red' }}>привет</p>
}

export default HiThere

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

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

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

function HelloWorld() {
  return (
    <div>
      Привет, мир
      <p>с ограниченной областью видимости!</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 для обеспечения наилучшего опыта разработчика с быстрым обновлением (Fast Refresh).