키모스토리

#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>

<meta name="description" content="The best movies on the best">

 

 

 

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

 

 

 

 

반응형
저작자표시 (새창열림)

'Web Devlopment > NextJs' 카테고리의 다른 글

#7. fetch  (0) 2025.03.28
#6. Dynamic Routes  (0) 2025.03.27
#4. layout  (0) 2025.03.27
#3. Next.js에서의 렌더링 방식  (0) 2025.03.27
#2. navigation, not-found(404)  (0) 2025.03.27
'Web Devlopment/NextJs' Related Articles more