En mi aplicación nextJS, necesito cargar una hoja de estilo dinámicamente según la preferencia del usuario recibida de la base de datos.
Entonces, en mi página, lo estoy agregando en Head (siguiente/head), de la siguiente manera:
<Head> <link rel="stylesheet" href={`/fonts/${type}/stylesheet.css`}></link> </Head>Sin embargo, esto me está dando una advertencia en la consola en modo de desarrollo:
Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="/fonts/cal/stylesheet.css"). Use Document instead. See more info here: https://nextjs.org/docs/messages/no-stylesheets-in-head-componentLa hoja de estilo en sí contiene la fuente:
@font-face { font-family: "Cal Sans"; src: url("CalSans-SemiBold.woff2") format("woff2"), url("CalSans-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }Dado que la preferencia del usuario se almacena en la base de datos y recibo este valor a través de una consulta, no sé cómo puedo agregarlo al archivo Document.js.
Realmente apreciaré cualquier ayuda en esto.
Si bien es posible importar dinámicamente un archivo CSS en el componente principal de su aplicación (y puede consultar un ejemplo en esta guía ), sugeriría una solución diferente.
Incluya todas las hojas de estilo en su aplicación, pero haga que sus estilos solo se apliquen cuando el elemento html (o body ) tenga una clase determinada. Luego, todo lo que necesita hacer es modificar esa clase según las preferencias del usuario.
// styles.css body.themeFoo #container { // some styles... }Así es como funcionan muchas implementaciones del modo oscuro, por ejemplo, en Tailwind CSS. Creo que este es un mejor patrón para resolver su problema.
next.js usa react así que tal vez pruebe el gancho useState o puede cambiar la propiedad herf