Next js SEO 다이나믹(동적) 페이지 메타데이터 생성하기 (Feat. generateMetadata)

export const metadata: Metadata = {
  title: 'Next js SEO 가이드',
  description: 'Next.js에서 SEO를 설정하는 방법을 알아보겠습니다.',
  // ... 생략
};

// next js 공식 문서 예시 코드
 
import { Metadata, ResolvingMetadata } from 'next';
 
type Props = {
  params: { id: string };
  searchParams: { [key: string]: string | string[] | undefined };
};
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // params에서 id 추출
  const id = params.id;
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json());
 
  // 선택적으로 상위 메타데이터에 액세스하고 확장(대체하지 않음)
  const previousImages = (await parent).openGraph?.images || [];
 
  return {
    title: product.title,
    description: product.description,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  };
}
 
export default function Page({ params, searchParams }: Props) {
  const id = params.id;
  const product = await fetch(`https://.../${id}`).then((res) => res.json());
 
  const pageData = product.find((p) => p.id === id);
 
  if (!pageData) notFound();
 
  return (
    <div>
      <h1>내용</h1>
    </div>
  );
}

// 예시
export async function fetchProduct(id: string) {
  return fetch(`https://.../${id}`).then((res) => res.json());
}

import { fetchProduct } from './getProduct';
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const id = params.id;
  const product = await fetchProduct(id);
 
  const previousImages = (await parent).openGraph?.images || [];
 
  return {
    title: product.title,
    description: product.description,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  };
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const id = params.id;
  const product = await fetchProduct(id);
 
  const previousImages = (await parent).openGraph?.images || [];
 
  return {
    title: product.title,
    description: product.description,
    openGraph: {
      images: [product.thumbnail, ...previousImages],
    },
  };
}