4.md

May 17, 2020 · View on GitHub

Recursos, Metadados e CSS

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

Metadados

E se desejássemos modificar os metadados da página, como a tag HTML <title>?

<title> faz parte da tag HTML <head>, então vamos ver como podemos modificar a tag <head> em uma página Next.js.

Abra o pages/index.js no seu editor e veja as seguintes linhas:

<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

Observe que <Head> é usado em vez da <head> minúscula. <Head> é um componente React incorporado ao Next.js. Permite modificar o <head> de uma página.

Você pode importar o componente Head do módulo next/head.

Adicionando `<Head>` ao `first-post.js`

Não adicionamos um <title> à nossa rota /posts/first-post. Vamos adicionar um.

Abra o arquivo pages/posts/first-post.js.

Primeiro, importe o Head do next/head:

import Head from 'next/head'

Em seguida, adicione-o ao componente FirstPost. Por enquanto, adicionaremos apenas a tag title:

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      …
    </>
  )
}

Tente acessar http://localhost:3000/posts/first-post. A guia do navegador deve agora dizer "First Post". Ao usar as ferramentas de desenvolvedor do seu navegador, você deve ver que a tag title é adicionada ao <head>.

Para saber mais sobre o next/head, consulte a documentação de referência da API.

Se você deseja personalizar o <html>, por exemplo, para adicionar o atributo lang, você pode fazer isso criando um componente de Document personalizado. Saiba mais na documentação do documento personalizado.

← Pagina Inicial