Vamos agora falar sobre o estilo CSS.
Como você pode ver, nossa página de índice (http://localhost:3000) já possui algum estilo. Se você der uma olhada em pages/index.js
, deverá ver o código assim:
<style jsx>{`
…
`}</style>
Isso está usando uma biblioteca chamada styled-jsx. É uma biblioteca "CSS-in-JS" - permite escrever CSS em um componente React e os estilos CSS terão escopo definido (outros componentes não serão afetados).
O Next.js possui suporte interno para styled-jsx, mas você também pode usar outras bibliotecas CSS-in-JS populares, como componentes estilizados ou animados.
O Next.js possui suporte interno para CSS e Sass, o que permite importar arquivos .css
e .scss
.
O uso de bibliotecas CSS populares, como o Tailwind CSS, também é suportado.
Nesta lição, falaremos sobre como escrever e importar arquivos CSS no Next.js. Também falaremos sobre o suporte interno do Next.js. para módulos CSS e Sass. Vamos mergulhar!