CSS no NextJS: o que é, principais formas de estilização, como usar

Se você chegou até aqui procurando por 'css next js', 'tailwind next js', 'css modules next js' ou 'melhor forma de estilizar next js', está no lugar certo!  

Neste artigo, vamos explorar as principais opções que o  NextJS oferece para trabalhar com CSS, incluindo CSS Modules e bibliotecas que utilizam CSS-in-JS. 

O que são CSS Modules no NextJS? 

O NextJS suporta CSS Modules, ou seja, ele permite a importação de arquivos CSS em um componente React. Com o uso de CSS Modules, o escopo do CSS é definido localmente, criando automaticamente nomes de classes exclusivos.

Isso permite a utilização dos mesmos nomes de classe CSS em arquivos diferentes, sem preocupações com conflitos. 

 Como usar CSS Modules no NextJS passo a passo 

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, o arquivo deve ter a extensão .module.css. 

Outro ponto importante é que, em produção, o NextJS realiza a minificação dos arquivos CSS, garantindo que apenas o necessário seja carregado na aplicação.

No exemplo acima, usamos CSS Modules em nível de componente. Mas e se quisermos aplicar estilos em todas as páginas? 

Como aplicar o CSS Global no Nest.JS: passo a passo 

O Next.js também oferece suporte para CSS global. Para carregar arquivos desse tipo, é necessário utilizar um arquivo chamado pages/_app.js, que é responsável por incluir componentes globais.

O CSS global só pode ser importado dentro de pages/_app.js, pois ele afeta todos os elementos da página. Recomenda-se criar um arquivo CSS em uma pasta separada, como uma pasta chamada 'estilos': 

* {  
box-sizing: border-box; 
} 
e importar dentro do _app.js (Pages Router) ou no root layout app/layout.tsx: 
import '../estilos/global.css'

Além do suporte ao CSS Modules e ao CSS global, há outras opções muito utilizadas para estilização no frontend, como o Sass. 

Como usar SASS no NextJS (e quando escolher SASS Modules)  

O Sass é uma das ferramentas mais utilizadas no front-end e, por isso, o Next.js já oferece integração nativa. Antes de usar o suporte Sass integrado do Next.js, precisamos instalar o sass como dependência de desenvolvimento: 

npm install -D sass  
// ou  
pnpm add -D sass  
// ou  
yarn add -D sass"

Para usar o Sass, basta importar arquivos com as extensões .scss ou .sass. Também é possível usá-lo em nível de componente, aproveitando os CSS Modules com as extensões .module.scss ou .module.sass. 

import styles from '../styles/Button.module.scss' 

Além dessas opções nativas de CSS e do suporte ao Sass, o NextJS também oferece integração com bibliotecas que utilizam a estratégia CSS-in-JS. 

CSS-in-JS no NextJS: como funciona e melhores bibliotecas 

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 nativo à biblioteca Styled JSX.

Ela é uma biblioteca CSS-in-JS mantida pela Vercel, logo ela permite que você escreva css dentro de um componente React, e os estilos CSS terão o escopo definido.

No entanto, é importante destacar que no App Router (padrão em 2026), o uso do Styled JSX requer versão v5.1.0 ou superior e configuração específica com style registry para compatibilidade com React Server Components. 

export default () => ( 
  <div> 
<p>Artigo sobre NextJS na Alura</p> 
  <style jsx>{` 
   p { 
     color: blue; 
   } 
    `}</style> 
  </div> 
)

Essa biblioteca (Styled JSX) é mantida pela Vercel, empresa por trás do Next.js, e é utilizada especialmente para estilizar Server Components e páginas no App Router com escopo local dos estilos.

Além do Styled JSX, o NextJS oferece suporte para outras bibliotecas populares de CSS-in-JS que funcionam com o App Router: 

• 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 e usadas no mercado. 

• Atualização importante: A partir da versão 6.3.0+ do styled-components, há suporte nativo para React Server Components sem necessidade de configuração adicional. Para versões 6.0-6.2, é necessário configurar um registry no layout e adicionar a diretiva 'use client'. Segundo a documentação oficial do styled-components, o suporte RSC está disponível sem configuração zero na v6.3+. 

Estruturando o CSS do seu projeto NextJS: dicas para organizar estilos 

No vídeo indicado, Mario Souto mostra como ele pensa em Design Systems para estruturar seus projetos em NextJS. 

Saiba mais sobre estilização no NextJS 

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

E para finalizar, lembre-se que ao usar Styled Components com Next.js App Router, certifique-se de: 

• Usar styled-components versão 6.3.0+ para suporte nativo a RSC; 
• Para versões anteriores, configurar o registry conforme documentação oficial; 
• Adicionar `styledComponents: true` no `next.config.js` para otimizações do compilador; 
• Considerar o impacto no bundle size, especialmente se a maior parte da aplicação usar Server Components; 

> Acesse a Documentação oficial do Next.JS para mais informações! 

Até mais!✨