CSS com NextJS

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.

classes de css

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:

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.

https://www.youtube.com/watch?v=mJK5oGixSYo

Para saber mais

Se você se interessou por Styled Components, aqui na Alura temos um curso sobre que abstrair seu css utilizando essa biblioteca.