Next.js로 계발을 하는 경우가 많은데,
Head가 document에도 있고 head에도 있어서 둘의 차이점이 궁금해졌습니다.
그리고 어느 기준에 따라 나눠서 사용하는지도 궁금해졌습니다.
둘 다 html 의 <head>를 가리키는 건 맞는데,
next/document 의 Head 는 Custom Document를 만들 때, import 해오는 태그로,
모든 페이지에서 렌더링되기 때문에,
모든 페이지의 공통되는 정보만을 입력해야 합니다.
The <Head /> component used in _document is not the same as next/head. The <Head /> component used here should only be used for any <head> code that is common for all pages. For all other cases, such as <title> tags, we recommend using next/head in your pages or components. React components outside of <Main /> will not be initialized by the browser. Do not add application logic here or custom CSS (like styled-jsx). If you need shared components in all your pages (like a menu or a toolbar), read Layouts instead. Document currently does not support Next.js Data Fetching methods like getStaticProps or getServerSideProps.
출처 https://nextjs.org/docs/pages/building-your-application/routing/custom-document
next/head의 Head는 작성된 페이지에서만 렌더링이 되기 때문에,
<title>과 같이 해당 페이지에만 해당하는 정보를 입력하는 것이라고 합니다.
결론
대부분의 상황에서 next/head 를 씁니다.
'FrontEnd > Next.js' 카테고리의 다른 글
| [ Next.js ] Next.js 란？ (0) | 2023.12.30 |
|---|---|
| [ Next.js ] 절대경로 설정하기 (0) | 2023.12.24 |
| [ Next.js ] Next.js v12 프로젝트 세팅하기 (1) | 2023.12.24 |
| [ Next.js ] Static Site Generation vs Server Side Rendering (1) | 2023.11.24 |
