6관문. SEO & Metadata API

관문 6 / 7

generateMetadata로 동적 라우트의 title과 openGraph 이미지를 동적으로 생성하라.

📖 이론 비급

Metadata API: 검색 엔진 최적화

Next.js 13+의 Metadata API는 <head> 태그를 서버에서 생성한다. 정적 메타데이터는 export const metadata = {...}로 선언하고, 동적 메타데이터는 export async function generateMetadata({ params })를 사용한다.

데이터 패칭도 가능하며, Request Memoization으로 page.js와 중복 요청이 발생하지 않는다.

⚔️ 수련 코드

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

// TODO: generateMetadata 함수를 구현하라
// params.id로 포스트 데이터를 fetch하여
// title: post.title
// description: post.body.slice(0, 100)
// openGraph: { title, description, type: 'article' }
// 를 반환하라

export async function generateMetadata({ params }) {
  // 힌트: Request Memoization으로 page.js와 같은 fetch를 사용해도 중복 요청 없음
}

async function getPost(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  return res.json();
}

export default async function PostPage({ params }) {
  const post = await getPost(params.id);
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

Open Sandbox