Artigos > Front-end

CSS com NextJS

Felipe Nascimento
Felipe Nascimento

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.

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

Artigos > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas