Adicionando CSS no Next.js

Existem duas maneiras principais de adicionar estilos: CSS global, onde os estilos se aplicam a todos os elementos, e CSS "scoped", que utiliza CSS Modules para aplicar estilos a componentes específicos.

O instrutor então demonstra como adicionar estilos globais, criando um arquivo CSS global e adicionando regras para resetar a margem e o preenchimento de todos os elementos, alterar a fonte padrão e adicionar um fundo preto ao cabeçalho. Ele também mostra como importar o arquivo CSS global em um componente Next.js.

Em seguida, o instrutor demonstra como adicionar estilos "scoped" a um componente específico. Ele cria um arquivo CSS Module para o componente, adiciona algumas regras de estilo e, em seguida, importa o arquivo CSS Module no componente. Ele enfatiza que os estilos "scoped" só se aplicam ao componente em que são importados.

Por fim, o instrutor apresenta um exercício para os alunos: criar estilos para a página inicial da aplicação. Ele então demonstra a solução, que envolve a criação de um arquivo CSS Module para a página inicial e a adição de algumas regras de estilo. O vídeo termina com o instrutor mencionando que a próxima aula será sobre a criação de um layout para a aplicação.