#5. metadata

Web Devlopment/NextJs

#5. metadata

키모형 2025. 3. 27. 19:40

html 문서의 metadata 데이터를 관리

/app/layout.tsx 에 있는 내용이 모든 문서에 병합되어 등록됨

예) /app/layout.tsx 의 metadata 에 description 데이터를 등록

export const metadata = {
  description: 'The best movies on the best',
}

/app/(home)/page.tsx 안에 metadata 코드를 추가 하면서 title 만 등록

export const metadata = {
  title: 'Home | Next Movies',
}

export default function Page(){
  return (
    <div>      
      <h1>Hello NextJs!!</h1> 
    </div> 
  )
}

- 아래 결과처럼 title, description 둘다 포함되는 것이 확인됨

- layout 이 중첩되는 것과 다르게 metadata는 같은 가장 가까운 부분을 기준으로 내용이 병합됨

<title>Home | Next Movies</title>

metadata template

- metadata의 내용을 하위 페이지에 중첩 시킬때 템플릿 형식으로 상속.

- 최상위 /app/layout.tsx 파일의 metadata 아래와 같이 수정

import { Metadata } from "next"
import Footer from "../components/footer"
import Navigation from "../components/navigation"

export const metadata : Metadata = {
  title: {
    template: "%s | Next Movies",
    default: "Loading...",
  },
  description: 'The best movies on the best framework',
}

export default function RootLayout({children, }: { children: React.ReactNode}) {
  return (
    <html lang="en">
      <body>
        <Navigation />
        {children}
      </body>
    </html>
  )
}

하위 페이지에 metadata 추가

/app/(home)/page.tsx

export const metadata = {
  title: 'Home',
}

export default function Page(){
  return (
    <div>      
      <h1>Hello NextJs!!</h1> 
    </div> 
  )
}

/app/about-us/page.tsx

export const metadata = {
  title: 'About us',
}

export default function AboutUs(){
  return (
    <div>
      <h1>AboutUs</h1> 
    </div> 
  )
}

template: "%s | Next Movies",

%s 부분에 Home, About us 이 대입되어 아래와 같은 결과로 병합된다.

<title>Home | Next Movies</title>

<title>About us | Next Movies</title>

medata 전체 정보

https://nextjs.org/docs/app/api-reference/functions/generate-metadata

저작자표시 (새창열림)