📚 Reference

• 공식 문서 1

📜 Chapter

next/head

App Router

Metadata

• Metadata

• Pages Router에서 App Router로 마이그레이션 할 때, next/head를 Metadata로 변경한다.

• Next.js has a Metadata API that can be used to define your application metadata (e.g. meta and link tags inside your HTML head element) for improved SEO and web shareability.

• 일반적으로 제목 또는 메타데이터를 설정하기 위해 필요한데 여기에는 렌더링 되지 않는다.

• Next.js에는 다른 방식으로 데이터를 덧붙일 수 있는데 메타데이터라는 특별한 변수를 불러오는 것이다.

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

• 상수 또는 변수일 수 있다. 위에 metadata 역시 정해진 이름이다.
• 이 이름의 변수 또는 상수를 export하면 페이지 제목(title)과 페이지 설명(description)을 설정할 수 있는 객체가 있을 것이다.
• 기타 메타데이터도 있을 것인데 특정 레이아웃에 포함된 모든 페이지에 적용된다.
• 따라서 head 부분이 없는 이유는 head에 들어가는 모든 내용은 메타데이터에 의해 설정되거나 Next.js로 인해 이면에서 자동으로 설정되기 때문이다.