6.md

May 17, 2020 · View on GitHub

Recursos, Metadados e CSS

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

Layout Component

Primeiro, vamos criar um componente de layout que será comum em todas as páginas.

Crie um diretório de top-level chamado components.
Dentro, crie um arquivo chamado layout.js com o seguinte conteúdo:

function Layout({ children }) {
  return <div>{children}</div>
}

export default Layout

Em seguida, em pages/posts/first-post.js.js, importe o Layout e faça dele o componente mais externo.

import Head from 'next/head'
import Link from 'next/link'
import Layout from '../../components/layout'

export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </Layout>
  )
}

Adicionando CSS

Agora, vamos adicionar alguns estilos para o Layout. Para fazer isso, usaremos módulos CSS, que permitem importar arquivos CSS em um componente React.

Crie um arquivo chamado layout.module.css no diretório de components com o seguinte conteúdo:

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

Importante: Para usar esses Módulos CSS, o nome do arquivo CSS deve terminar com .module.css.

Para usar isso no layout, você precisa:

Importá-lo como styles
Usar styles.<class-name> como className
Nesse caso, o nome da classe é container, portanto, usaremos styles.container

import styles from './layout.module.css'

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>
}

Se você acessar http://localhost:3000/posts/first-post agora, verá que o texto está agora dentro de um contêiner centralizado:

Gera automaticamente nomes de classe exclusivos

Agora, se você der uma olhada no HTML nas ferramentas de desenvolvedor do seu navegador, perceberá que a tag div tem um nome de classe que se parece com layout_container __....

É isso que os Módulos CSS fazem: Ele gera automaticamente nomes de classe exclusivos. Desde que você use módulos CSS, não precisará se preocupar com colisões de nomes de classes.

Além disso, o recurso de divisão de código do Next.js. também funciona em módulos CSS. Ele garante que a quantidade mínima de CSS seja carregada para cada página. Isso resulta em tamanhos de pacote menores.

Os módulos CSS são extraídos dos pacotes configuráveis do JavaScript no momento da construção e geram arquivos .css carregados automaticamente pelo Next.js.

← Pagina Inicial