Estilização com CSS Modules e Global CSS ✨

Bem-vindo(a) à nossa aula prática sobre estilização no Next.js 15! 🚀 Nesta sessão, vamos mergulhar em duas das abordagens mais comuns e eficientes para adicionar estilo aos seus componentes: Global CSS e CSS Modules. Entender quando e como usar cada uma é fundamental para construir aplicações Next.js robustas e fáceis de manter.

Ao final desta aula, você será capaz de:

Aplicar estilos globais para definir a base visual da sua aplicação.
Utilizar CSS Modules para estilizar componentes de forma isolada, evitando conflitos.
Decidir qual abordagem de estilização é a mais adequada para diferentes cenários.

Vamos lá! 💡

1. Introdução à Estilização no Next.js 🎨

O Next.js oferece suporte nativo e otimizado para CSS, permitindo que você estilize seus projetos de diversas maneiras. As duas abordagens que veremos hoje são as mais fundamentais:

Global CSS: Ideal para estilos que precisam ser aplicados a todo o seu aplicativo, como resets de CSS, variáveis de tema, estilos de tipografia base ou classes utilitárias.
CSS Modules: Perfeito para encapsular estilos em componentes individuais, garantindo que os estilos de um componente não afetem outros. Isso resolve o problema comum de conflitos de nomes de classes em grandes projetos.

Ambas as abordagens são compiladas e otimizadas pelo Next.js, resultando em um desempenho excelente.

2. Estilização com Global CSS 🌍

Quando você precisa que um estilo seja aplicado em todo o seu aplicativo, o Global CSS é a escolha certa. No Next.js, você pode importar um arquivo CSS global em seu layout.js (no App Router). A prática recomendada para o App Router é importá-lo no layout.js raiz.

Como usar Global CSS:

Crie um arquivo CSS global: Geralmente, ele é nomeado globals.css e colocado na pasta app/.
Importe-o no layout.js: Adicione a instrução de importação no topo do seu app/layout.js.

Exemplo Prático:

Vamos criar um estilo global para definir a fonte padrão e algumas cores básicas.

`app/globals.css`

/* app/globals.css */
 
:root {
  --primary-color: #0070f3;
  --secondary-color: #1a1a1a;
  --text-color: #333;
  --background-color: #f6f6f6;
}
 
body {
  font-family: 'Inter', sans-serif; /* Ou sua fonte preferida */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--background-color);
  color: var(--text-color);
}
 
h1, h2, h3, h4, h5, h6 {
  color: var(--secondary-color);
}
 
a {
  color: var(--primary-color);
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

`app/layout.js`

// app/layout.js
import './globals.css'; // Importa o arquivo CSS global
 
export const metadata = {
  title: 'Meu App Next.js',
  description: 'Um aplicativo Next.js construído com carinho.',
};
 
export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR">
      <body>
        {children}
      </body>
    </html>
  );
}

Agora, qualquer elemento em seu aplicativo que utilize as tags body, h1, a ou a classe .container herdará esses estilos.

3. Estilização com CSS Modules 📦

CSS Modules são a solução recomendada para estilização de componentes no Next.js. Eles resolvem o problema de escopo do CSS, gerando nomes de classes únicos para cada estilo, garantindo que os estilos de um componente não "vazem" e afetem outros.

Como usar CSS Modules:

Crie um arquivo CSS Module: Nomeie o arquivo com a convenção .module.css (ex: Button.module.css).
Importe no componente: Importe o arquivo CSS como um objeto JavaScript no seu componente.
Use as classes: Acesse as classes como propriedades do objeto importado.

Exemplo Prático:

Vamos criar um componente de botão estilizado com CSS Modules.

`app/components/Button.module.css`

/* app/components/Button.module.css */
 
.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}
 
.button:hover {
  background-color: #005bb5; /* Um tom mais escuro da cor primária */
}
 
.secondary {
  background-color: var(--secondary-color);
}
 
.secondary:hover {
  background-color: #333;
}

`app/components/Button.jsx`

// app/components/Button.jsx
import styles from './Button.module.css';
 
export default function Button({ children, type = 'primary', onClick }) {
  const buttonClass = type === 'secondary' ? styles.secondary : styles.button;
 
  return (
    <button className={buttonClass} onClick={onClick}>
      {children}
    </button>
  );
}

`app/page.jsx` (Usando o componente `Button`)

// app/page.jsx
import Button from './components/Button'; // Importa o componente Button
 
export default function HomePage() {
  return (
    <div className="container"> {/* Usa a classe global .container */}
      <h1>Bem-vindo à Página Inicial!</h1>
      <p>Este é um parágrafo de exemplo usando estilos globais.</p>
      
      <div style={{ display: 'flex', gap: '10px', marginTop: '20px' }}>
        <Button onClick={() => alert('Botão Primário Clicado!')}>
          Botão Primário
        </Button>
        <Button type="secondary" onClick={() => alert('Botão Secundário Clicado!')}>
          Botão Secundário
        </Button>
      </div>
    </div>
  );
}

Observe que, ao inspecionar o elemento no navegador, as classes CSS Modules terão um nome gerado automaticamente, como Button_button__abc12 ou Button_secondary__xyz34. Isso garante a unicidade e evita conflitos.

4. Exercícios Práticos: Construindo um Layout Estilizado 🛠️

Agora é a sua vez de colocar a mão na massa! Vamos construir uma pequena aplicação que utiliza tanto Global CSS quanto CSS Modules para estilizar diferentes partes de um layout.

Objetivo: Criar uma página simples com um cabeçalho, uma área de conteúdo principal com cards de produtos e um rodapé.

Estrutura do Projeto:

Certifique-se de ter um projeto Next.js 15 configurado. Se não tiver, crie um novo:

npx create-next-app@latest my-styling-app --typescript false --eslint true --tailwind false --app --src-dir false
cd my-styling-app

Tarefas:

1. Configurar Global CSS:
- Mantenha o app/globals.css e app/layout.js que configuramos acima, garantindo que as variáveis de cor e a classe .container estejam disponíveis.
- Adicione um estilo global para h1 e p tags no globals.css para ter um margin-bottom padrão.
2. Criar o Componente Header com CSS Module:
- Crie um arquivo app/components/Header.jsx.
- Crie um arquivo app/components/Header.module.css.
- O cabeçalho deve ter um background-color (use uma de suas variáveis globais), padding, color e text-align: center.
- Dentro do Header.jsx, adicione um <h1> com um título (ex: "Minha Loja Online").
3. Criar o Componente ProductCard com CSS Module:
- Crie um arquivo app/components/ProductCard.jsx.
- Crie um arquivo app/components/ProductCard.module.css.
- O card deve ter:
  - border: 1px solid #ddd;
  - border-radius: 8px;
  - padding: 15px;
  - margin: 10px;
  - box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  - Um título para o produto (<h2>), uma descrição (<p>) e um preço (<span>).
  - Use o componente Button que criamos anteriormente dentro do ProductCard para um botão "Adicionar ao Carrinho".
- O ProductCard.jsx deve aceitar title, description e price como props.
4. Criar o Componente Footer com CSS Module:
- Crie um arquivo app/components/Footer.jsx.
- Crie um arquivo app/components/Footer.module.css.
- O rodapé deve ter:
  - background-color (pode ser a cor secundária global).
  - color: white;
  - padding: 20px;
  - text-align: center;
  - margin-top: 40px; (para separá-lo do conteúdo).
- Dentro do Footer.jsx, adicione um parágrafo com um texto de copyright (ex: "© 2023 Minha Loja Online").
5. Integrar na app/page.jsx:
- Importe os componentes Header, ProductCard e Footer em app/page.jsx.
- Use o Header no topo da página.
- Crie uma seção principal (<main>) que utilize a classe global .container.
- Dentro da main, crie um div com um estilo display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; para organizar os ProductCards.
- Renderize pelo menos 3 ProductCards com dados fictícios.
- Use o Footer no final da página.

Dicas:

Lembre-se de importar styles de seus .module.css e usar className={styles.suaClasse}.
Para o ProductCard, você pode passar as props title, description, price e usar o Button com um onClick simples para testar.

5. Resumo e Próximos Passos 🚀

Parabéns! 🎉 Você dominou os fundamentos da estilização com Global CSS e CSS Modules no Next.js 15.

Recapitulando:

Global CSS (app/globals.css importado em app/layout.js): Ideal para estilos que afetam todo o aplicativo, como resets, variáveis CSS e estilos de base.
CSS Modules (.module.css): A melhor prática para estilos de componentes, garantindo encapsulamento e evitando conflitos de nomes de classes através de nomes de classes gerados unicamente.

A combinação dessas duas abordagens oferece uma forma flexível e poderosa de estilizar suas aplicações Next.js, mantendo o código organizado e escalável.

Próximos Passos:

Explorar outras bibliotecas CSS: O Next.js também suporta outras soluções populares como Tailwind CSS (que você pode ter optado por não instalar nesta aula, mas é uma ótima opção), Sass, Styled Components ou outras bibliotecas CSS-in-JS.
Temas e Variáveis CSS: Aprofunde-se no uso de variáveis CSS para criar temas dinâmicos e facilmente modificáveis.
Otimização de CSS: Aprenda sobre técnicas como purgar CSS não utilizado para reduzir o tamanho dos seus arquivos de estilo.

Continue praticando e experimentando! A estilização é uma parte crucial do desenvolvimento web, e dominar essas ferramentas fará de você um desenvolvedor Next.js ainda mais completo.

Até a próxima aula! 👋

Fundamentos do Next.js 15

Estilização com CSS Modules e Global CSS

Estilização com CSS Modules e Global CSS ✨

1. Introdução à Estilização no Next.js 🎨

2. Estilização com Global CSS 🌍

Como usar Global CSS:

Exemplo Prático:

app/globals.css

app/layout.js

3. Estilização com CSS Modules 📦

Como usar CSS Modules:

Exemplo Prático:

app/components/Button.module.css

app/components/Button.jsx

app/page.jsx (Usando o componente Button)

4. Exercícios Práticos: Construindo um Layout Estilizado 🛠️

Estrutura do Projeto:

Tarefas:

Dicas:

5. Resumo e Próximos Passos 🚀

Próximos Passos:

`app/globals.css`

`app/layout.js`

`app/components/Button.module.css`

`app/components/Button.jsx`

`app/page.jsx` (Usando o componente `Button`)