Tengo un blog ( http://minid.net ) en Jekyll que quiero migrar a Next.js. Mi blog no usa un archivo externo para los estilos. Incrusté todos los estilos en el elemento HEAD usando un elemento STYLE. En Next.js, creé un componente Style.js, que devuelve body {} pero arroja un error.
export default function Styles() { return <style>body{background: red;}</style>; }Mi blog se beneficia de no tener que usar archivos externos, cada HTML generado tiene sus estilos, por lo que no quiero usar la hoja de estilo global tradicional para Next.js.
¿Como puedo resolver esto?
Lea esta sección de los documentos: https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js
En resumen, debe colocar los elementos secundarios del elemento de style dentro de una cadena encerrada entre corchetes.
export default function Styles() { return ( <style jsx>{` body{ background: red; } `}</style>; }