Next.js metadata

ssr를 사용하는 이유 중 큰 부분으로 metadata를 꼽을 수 있을 것 같다. 

title부터 og태그까지 서버로부터 받아온 데이터를 metadata에 넣어주면서 동적으로 변경하기 위해서이다. 

 

Next.js에서는 아주 간단하게 이런 기능들을 제공하는데, 해당 기능은 Server Components에서만 지원하는 기능으로 

metadata와 generateMetadata가 거기에 해당하는 속성들로 간단하게 metadata를 변경할 수 있다. 

 

metadata

layout나 page에서 export 하면 적용할 수 있다. 

export const metadata = {
  title: "...",
  description: "...",
}

 

가장 기본적인 기능으로 페이지별로 정적으로 metadata를 설정할 수 있다. 

 

metadata fields

metadata는 속성에 특수한 기능들이 존재하는데, 전부 알고 싶다면 링크를 통해서 직접 확인하고, 

몇몇 자주 사용할만한 기능을 가져와봤다. 

 

title

문서에서 title은 가장 자주 보이면서 SEO에서 중요하다고 생각한다. 

title이 모든 페이지가 같아버리면 SEO 점수가 확 낮아지는 경험을 하고보니 더더욱 중요하다고 생각된다. 

export const metadata = {
  title: "Next.js",
}

===

<title>Next.js</title>

 

title 속성을 주면 html 파일에 title 태그로 만들어진다. 

문자열로 주면 바로 변환되지만 객체를 사용해서 default,  template, absolute 같은 값을 줄 수 있다. 

 

default 

자식 경로들이 title 속성을 주지 않더라도 default 속성이 있다면 해당 title로 설정된다. 

app/layout.js

export const metadata = {
  title: {
    default: "Next",
  }
}

app/about/page.jsx 

export const metadata = {}

// <title>Next</title>

 

template

자식 경로들이 일정한 유형의 제목을 가질 수 있도록 템플릿으로 설정할 수 있다. 

app/layout.js

export const metadata = {
  title: {
    default: "Next",
    template: "%s | Next"
  }
}

app/about/page.jsx 

export const metadata = {
   title: "About"
}

// <title>About | Next</title>

 

template은 몇가지 주의해야할 사항이 존재한다. 

• default 속성이 만드시 존재해야 한다. 
• layout에서 설정한 template은 동일한 경로의 page에서 설정한 title에는 적용되지 않는다. 
• 하위 경로를 대상으로 하기 때문에 page에 정의된 template은 아무런 효과가 없다. 
• title 혹은 default를 정의하지 않는 경로에는 적용되지 않는다. 

absolute

부모 경로에서 설정한 template설정을 무시하고 title을 적용시킨다. 

app/layout.js

export const metadata = {
  title: {
    default: "Next",
    template: "%s | Next"
  }
}

app/about/page.jsx 

export const metadata = {
   title: { 
     absolute: "About"
   }
}

// <title>About</title>

 

title 하나만 설명했지만 외에도 alternates, openGraph 등 여러가지 옵션이 존재한다.

원하는 metadata 설정을 찾고 싶다면 링크를 반드시 참고하자. 

 

generateMetadata

정적으로 metadata를 설정하는 경우보다 게시글 상세 페이지라던지 서버에서 전달받은 데이터를 기반으로 

metadata를 설정해야 하는 경우도 존재한다. 

 

이때 사용할 수 있는 것이 generateMetadata 함수이다. 

// app/products/[id]/page.js

export const generateMetadata = ({ params, searchParams }) => {
  const id = params.id;
  const { key } = searchParams;
  
  const product = await fetch(`https://.../${id}`).then((res) => res.json());

  return {
    title: product.title,
    openGraph: {
      images: [product.thumbnail],
    }
  }
}

 

 

generateMetadata를 사용한 함수의 return에 metadata 정보를 넘겨주면 해당 정보를 기반으로 

metadate가 설정이 된다.