Nesse artigo vamos ver as opções que o NextJS oferece para se trabalhar com CSS, de CSS Modules até bibliotecas que utilizam CSS in JS.
CSS Modules
O NextJS suporta CSS Modules, ou seja, ele permite a importação de arquivos CSS em um componente React. Com o uso do CSS Modules o escopo do CSS É definido localmente criando automaticamente um nome de classe exclusivo. Isso permite a utilização dos mesmos nomes de classe CSS em arquivos diferentes sem se preocupar com colisões.
Como usar o CSS module
Por exemplo, para usar a classe title em um elemento h1
.title {
  color: blueviolet;
}
Precisamos importar o arquivo CSS e atribuir um nome a ele como por exemplo styles:
import styles from './title.module.css'

<h1 className={styles.title}>Alura</h1>
É importante lembrar que para usar CSS Modules precisamos usar o arquivo com a extensão .module.css.
Outra informação importante de se ter é que o NextJS em produção faz a minificação dos arquivos css garantindo que a quantidade mínima de css seja carregada em nossa aplicação. Nesse exemplo, utilizamos CSS Modules a nível de componente, mas se quisermos que algum estilo seja carregado em todas as páginas?
CSS Global
O Next.js também tem suporte para CSS global, para carregar arquivos deste tipo, precisamos de um arquivo chamado pages/_app.js onde vai entrar o componente que queremos que seja global. O CSS global não pode ser importado fora de pages / _app.js é que ele afeta todos os elementos da página. Então o indicado é sempre criar um arquivo css em uma outra pasta, por exemplo, uma pasta chamada estilos:
* { 
    box-sizing: border-box;
}
e importar dentro do _app.js:
import '../estilos/global.css'
Sabemos que o NextJS suporta CSS modules e global por padrão, mas, no frontend existem outras opções muito utilizadas para se trabalhar com css, como por exemplo o Sass.
SASS
O Sass está a um bom tempo no frontend e é largamente utilizado, por isso as pessoas por trás do Next.js pensaram nessa integração. Antes de usar o suporte Sass integrado do Next.js, precisamos instalar o sass:
npm install sass
Para usarmos o Sass, precisamos fazer o import usando as extensões .scss e .sass e podemos usá-lo em nível de componente por meio de CSS Modules e a extensão .module.scss ou .module.sass.
import styles from '../styles/Button.module.scss'
Além das opções nativas e suporte para o sass, o NextJS suporta algumas bibliotecas que utilizam a estratégia do CSS in JS.
CSS-in-JS
Do mesmo modo que o NextJS tem suporte ao CSS Modules e global sem precisar de configuração extra necessária, ele também tem suporte a biblioteca Styled JSX. Ela é uma biblioteca CSS-in-JS , logo ela permite que você escreva css dentro de um componente React, e os estilos CSS terão o escopo definido, sendo assim os outros componentes não serão afetados.
export default () => (
  <div>
    <p>Artigo sobre NextJS na Alura</p>

     <style jsx>{`
      p {
        color: blue;
      }
    `}</style>
  </div>
)
Essa biblioteca é mantida pela Vercel, é uma opção de CSS baseado em componentes, a Vercel é a empresa por trás do Next.js. Além do Styled JSX, o NextJS oferece suporte para algumas das bibliotecas que usam o conceito de CSS in JS do mercado, como:
Emotion
Tailwind CSS + Emotion
Styletron
Glamor
Cxs
Aphrodite
Fela
Além dessas bibliotecas, o NextJS também dá suporte para Styled Components, que uma das bibliotecas de CSS in JS mais famosas de usadas no mercado.
E como eu estruturo o css do meu projeto em NextJS?
Nesse vídeo o Mario Souto mostra como ele pensa em design systems para estruturar seus projetos em NextJS.
Para saber mais
Se você se interessou por Styled Components, aqui na Alura temos um curso sobre que abstrair seu css utilizando essa biblioteca.
Felipe Nascimento
Desenvolvedor e instrutor na Alura com foco em JavaScript.
Veja outros artigos sobre Front-end
Quer mergulhar em tecnologia e aprendizagem?
Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software
Me inscreva
Navegação
Black Friday 2021
Planos
Todos os cursos
Alura Cases
Guia de carreira
Instrutores
Trabalhe conosco
Como virar instrutor
Artigos
Para Escolas
Podcasts
Política de Privacidade
Termos de Uso
Sobre nós
Como Funciona
Dev em <T>
Perguntas frequentes
Status
Fale com a gente
Whatsapp
Email e telefone
Blog
Programação	
Front-end	
Data Science	
DevOps	
UX & Design	
Mobile	
Inovação & Gestão	
AOVS Sistemas de Informática S.A CNPJ 05.555.382/0001-33
Nossas redes e apps
YouTube Facebook Twitter Instagram
Google Play Store AppStore
Novidades e Lançamentos
Email
Receber
Não foi possível assinar a newsletter
Alura na sua empresa
Desenvolva seu time com apoio da nossa solução
Conheça mais
Comunidade
Scuba Dev
Imersões
Depoimentos
Nossos Instrutores
Parceiros
Nós, da Alura, somos uma das Scale-Ups selecionadas pela Endeavor, programa de aceleração das empresas que mais crescem no país.
Fomos uma das 7 startups selecionadas pelo Google For Startups a participar do programa Growth Academy em 2021.