<Head>

Examples

Sayfanın head adresine öğe eklemek için yerleşik bir bileşen sunuyoruz:

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}
 
export default IndexPage

Avoid duplicated tags

head adresinizde yinelenen etiketlerden kaçınmak için, aşağıdaki örnekte olduğu gibi, etiketin yalnızca bir kez işlenmesini sağlayacak key özelliğini kullanabilirsiniz:

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}
 
export default IndexPage

Bu durumda yalnızca ikinci <meta property="og:title" /> oluşturulur. meta etiketleri ile yinelenen key nitelikleri otomatik olarak işlenir.

Bileşen söküldüğünde head içeriği temizlenir, bu nedenle her sayfanın diğer sayfaların ekledikleri hakkında varsayımlarda bulunmadan head adresinde neye ihtiyacı olduğunu tam olarak tanımladığından emin olun.

Use minimal nesting

title meta veya diğer öğelerin (örneğin ) öğesinin script Head doğrudan çocukları olarak yer alması veya veya dizilerin en fazla bir düzeyine sarılması gerekir; aksi takdirde etiketler istemci tarafı gezintilerde doğru şekilde algılanmaz. <React.Fragment>

Use next/script for scripts

Kullanmanızı tavsiye ederiz next/scriptnext/head adresinde manuel olarak bir <script> oluşturmak yerine bileşeninizde

No html or body tags

<html> veya <body> etiketlerindeki nitelikleri ayarlamak için <Head> adresini kullanamazsınız. Bu bir next-head-count is missing hatasıyla sonuçlanacaktır. next/head yalnızca HTML <head> etiketi içindeki etiketleri işleyebilir.