Saiba como trabalhar e estruturar 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.

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.

Para saber mais

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

CSS com NextJS