5 minutos de leitura
Autor(a)
Desenvolvedor e instrutor na Alura com foco em JavaScript.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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 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.
Avalie este artigo
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?
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.
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.
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:
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.
No vídeo indicado, Mario Souto mostra como ele pensa em Design Systems para estruturar seus projetos em 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:
> Acesse a Documentação oficial do Next.JS para mais informações!
Até mais!✨
Lidando com parâmetros obrigatórios em JavaScript
Ler mais
Flexibilidade em páginas: como usar media queries eficazmente
Ler mais
Qual a diferença entre id e class?
Ler mais