(Next.js) document head vs page head

• Next.js에서는 "next/head"와 "next/document"의 Document 컴포넌트를 제공하는데, 전자는 페이지별로 독립적으로 사용할 헤드 태그를, 후자는 앱 전체에 공용으로 사용될 헤드 태그를 설정하는데 사용된다.

• "next/document"의 Head는 메타 태그나 웹폰트 등 공용으로 사용될 요청들을 삽입하며, "next/head"의 Head는 동적으로 헤드 태그를 설정할 수 있어, 예를 들어 페이지에 접근했을 때 다른 타이틀을 보여주는 등의 기능을 수행한다.

• Next.js에서는 페이지별로 다른 메타태그나 스타일시트 요청 등을 설정하고 싶을 때 'next/head'를 사용한다. 이를 통해 각 페이지마다 다른 title 태그를 설정할 수 있다.

• Next.js는 불필요한 요청을 최소화하고 효율적으로 자원을 전달하도록 설계된 개발 도구로, 이를 통해 웹사이트의 성능을 최적화할 수 있다.