← Pagina Inicial

Recursos, Metadados e CSS

1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9

Estilos globais

Módulos CSS são úteis para estilos em nível de componente. Mas se você deseja carregar algum CSS para ser carregado por todas as páginas, o Next.js também é compatível com isso.

Para carregar arquivos CSS globais, crie um arquivo chamado _app.js em pages e adicione o seguinte conteúdo:

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Este componente do app é o componente de nível superior que será comum em todas as páginas diferentes. Você pode usar este componente app para manter o estado ao navegar entre páginas, por exemplo.

Reinicie o servidor de desenvolvimento

Importante: Você precisa reiniciar o servidor de desenvolvimento ao adicionar _app.js. Pressione Ctrl + c para parar o servidor e executar:

npm run dev

Adicionando CSS Global

No Next.js, você pode adicionar arquivos CSS globais importando-os do _app.js. Você não pode importar CSS global em nenhum outro lugar.

O motivo pelo qual o CSS global não pode ser importado fora do _app.js é que o CSS global afeta todos os elementos da página.

Se você navegasse da página inicial para a página /posts/first-post, os estilos globais da página inicial afetariam /posts/first-post sem querer.

Você pode colocar o arquivo CSS global em qualquer lugar e usar qualquer nome. Então, vamos fazer o seguinte:

• Crie um diretório de styles de nível superior e crie um global.css dentro.

• Adicione o seguinte conteúdo. Isso Redefine alguns estilos e altera a cor da marca a.

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

Por fim, importe-o do _app.js:

import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Agora, se você acessar http://localhost:3000/posts/first-post, verá que os estilos são aplicados:

Se não funcionou: tenha certeza e reinicie o servidor de desenvolvimento ao adicionar _app.js.

Para resumir o que aprendemos até agora:

• Para usar módulos CSS, importe um arquivo CSS chamado *.module.css de qualquer componente.

• Para usar CSS global, importe um arquivo CSS em pages/_app.js.

← Pagina Inicial