Next.js에서 generateMetadata는 어떻게 사용하나요?

// app/layout.tsx
// 정적 metadata만 선언 — 모든 하위 페이지의 title이 동일하게 노출됩니다.

export const metadata = {
  title: '매일매일',
  description: '프론트엔드 기술 블로그',
};

// app/articles/[slug]/page.tsx
// generateMetadata 없이 페이지를 그냥 렌더링하는 경우

export default async function ArticlePage({ params }) {
  const { slug } = await params;
  const article = getArticleBySlug(slug);

  return <main>{article.content}</main>;
  // 이 페이지의 <title>은 여전히 루트의 "매일매일"입니다.
  // 검색 결과에 아티클 제목이 아닌 서비스명만 표시됩니다.
}

// app/layout.tsx
// title.template으로 하위 페이지 제목에 서비스명을 자동으로 붙입니다.

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    default: '매일매일',          // generateMetadata가 없는 페이지의 기본 제목
    template: '%s | 매일매일',    // %s 자리에 각 페이지의 title이 들어갑니다
  },
  description: '프론트엔드 기술 블로그',
  openGraph: {
    type: 'website',
    locale: 'ko_KR',
    siteName: '매일매일',
  },
};

// app/articles/[slug]/page.tsx
// 아티클 데이터를 기반으로 페이지마다 다른 메타데이터를 생성합니다.

import type { Metadata } from 'next';

interface PageProps {
  params: Promise<{ slug: string }>;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const article = getArticleBySlug(slug);

  // 존재하지 않는 slug는 빈 객체 반환 — 루트 layout의 기본값이 사용됩니다.
  if (!article) return {};

  const url = `https://example.com/articles/${slug}`;

  return {
    title: article.title,               // template에 의해 "제목 | 매일매일" 형태가 됩니다
    description: article.summary,
    keywords: article.tags,
    alternates: {
      canonical: url,                   // 정규 URL — 중복 인덱싱 방지
    },
    openGraph: {
      title: article.title,
      description: article.summary,
      type: 'article',
      publishedTime: article.date,      // ISO 8601 형식 권장: "2026-04-16"
      url,
      locale: 'ko_KR',
      siteName: '매일매일',
      tags: article.tags,
    },
    twitter: {
      card: 'summary',
      title: article.title,
      description: article.summary,
    },
  };
}

export default async function ArticlePage({ params }: PageProps) {
  const { slug } = await params;
  const article = getArticleBySlug(slug);
  if (!article) notFound();

  return <main>{article.content}</main>;
}