O que é CSS com JS? | Nextjs

Neste conteúdo, exploramos o conceito de CSS-in-JS e sua implementação prática usando Styled Components em um projeto Next.js, abordando os cuidados necessários com Server e Client Components.

O que é CSS-in-JS?

CSS-in-JS é uma abordagem onde definimos estilos CSS diretamente no JavaScript, permitindo:

• Escopo de estilos por componente
• Dinamismo através de props
• Melhor manutenção do código
• Colocação lógica dos estilos próximos aos componentes

No Next.js, essa abordagem funciona principalmente em Client Components, pois requer execução no lado do cliente para geração dos estilos.

Configuração Inicial

Para usar Styled Components no Next.js, precisamos:

1. Instalar a biblioteca: npm install styled-components
2. Configurar no next.config.js habilitando o compilador
3. Criar um Registry para coletar estilos durante a renderização

O Registry é um componente especial que gerencia a injeção de estilos no cabeçalho da página, essencial para o funcionamento correto com a renderização do Next.js.

Implementação Prática

Criamos um componente de título estilizado seguindo estes passos:

1import styled from "styled-components";
2const Title = styled.h1` color: red; font-size: 20px; `;
3function Product() { return <Title>Meu Produto</Title>; }

É crucial lembrar de adicionar "use client" no topo do arquivo, pois Styled Components requer execução no cliente.

Server Components vs Client Components

A principal limitação do CSS-in-JS no Next.js está na incompatibilidade com Server Components:

• Server Components: Renderizados no servidor, não suportam CSS-in-JS
• Client Components: Executados no navegador, compatíveis com a abordagem

Isso exige um planejamento cuidadoso da arquitetura dos componentes para balancear performance e funcionalidade.

Considerações Finais

Styled Components oferece vantagens significativas para estilização em aplicações Next.js:

• Produtividade: Sintaxe intuitiva e integrada ao JavaScript
• Manutenção: Estilos encapsulados por componente
• Dinamismo: Possibilidade de alterar estilos via props

Porém, é importante considerar:

• O impacto no tamanho do bundle JavaScript
• A necessidade de converter componentes para Client Components
• Possíveis limitações com recursos avançados como temas
• A importância de extensões como vscode-styled-components para melhor experiência de desenvolvimento

Para projetos complexos, vale avaliar se o benefício do CSS-in-JS justifica as limitações impostas pela arquitetura do Next.js, ou se abordagens como CSS Modules ou Tailwind CSS poderiam ser mais adequadas em determinados cenários.