O next não aceita mais usar uma folha de estilo diretamente do <Head>
https://nextjs.org/docs/messages/no-stylesheets-in-head-component
O next não aceita mais usar uma folha de estilo diretamente do <Head>
https://nextjs.org/docs/messages/no-stylesheets-in-head-component
hoje, com a Alura e o Google Gemini
Olá, Mayara! Tudo ok contigo?
Realmente incluir folhas de estilo diretamente no componente <Head> não é mais possível. Isso visto que a partir da versão 9.5 do Next.js, isso não é mais suportado.
A recomendação oficial é que você use CSS-in-JS, como o styled-components ou o próprio módulo de CSS do Next.js. Para isso, você precisa importar a folha de estilo no componente onde ela será utilizada, e não no <Head>.
Por exemplo, se você tem um arquivo de estilo chamado style.css e quer usá-lo em um componente chamado MyComponent, você deve fazer o seguinte:
import '../styles/style.css';
function MyComponent() {
return <div className="my-style">Olá, mundo!</div>;
}
export default MyComponent;
Dessa forma, o Next.js vai garantir que o CSS seja carregado corretamente.
Agradeço por compartilhar esse conhecimento e chamar atenção para esse ponto.
Creio que isso poderá ajudar outros alunos que podem se ver em problemas por conta disso.
Abraços e bons estudos!