<Head>
페이지의 head에 엘리먼트를 추가하기 위한 내장 컴포넌트를 제공합니다:
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPageAvoid duplicated tags
head에 중복된 태그를 방지하기 위해 key 속성을 사용할 수 있습니다. 이는 다음 예제에서와 같이 태그가 한 번만 렌더링되도록 보장합니다:
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이 경우 두 번째 <meta property="og:title" />만 렌더링됩니다. key 속성이 동일한 meta 태그는 자동으로 처리됩니다.
head의 내용은 컴포넌트가 마운트 해제될 때 삭제되므로, 각 페이지는 다른 페이지에서 추가한 내용을 가정하지 않고head에 필요한 모든 것을 완전히 정의해야 합니다.
Use minimal nesting
title, meta 또는 다른 엘리먼트(script 등)는 반드시 Head 엘리먼트의 자식으로 포함되거나, <React.Fragment> 또는 배열로 한 단계만 감싸야 합니다. 그렇지 않으면 클라이언트 사이드 내비게이션에서 태그가 올바르게 인식되지 않습니다.
Use next/script for scripts
컴포넌트 내에서 <script>를 next/head에 직접 생성하는 대신 next/script를 사용할 것을 권장합니다.
No html or body tags
<Head>를 사용하여 <html> 또는 <body> 태그에 속성을 설정할 수 없습니다. 이는 next-head-count is missing 오류를 발생시킵니다. next/head는 HTML <head> 태그 내부의 태그만 처리할 수 있습니다.