Adding inline stylesheets in HEAD on Next.js blog

Question

I have a blog (http://minid.net) in Jekyll that I want to migrate to Next.js. My blog doesn't use an external file for styles. I embedded all the styles in the HEAD element using a STYLE element. In Next.js, i created a Style.js component, that returns body {} but that throws an error.

export default function Styles() {
  return <style>body{background: red;}</style>;
}

My blog benefits from not having to use external files, each generated HTML has its styles, so I don't want to use the traditional global stylesheet for Next.js.

How can I solve this?

Answer 1

Take a read through this section of the docs: https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js

In summary you have to put the children of the style element inside of a string enclosed in brackets.

export default function Styles() {
  return (
    <style jsx>{`
      body{
        background: red;
      }
    `}</style>;
}