[Next.js] 일반 메타데이터, 동적 메타데이터 설정 방법

일반 메타데이터

import type { Metadata } from "next";

export const metadata: Metadata = {
  manifest: "/manifest.json",
  title: "투유, 투데이",
  description: "오늘, 너를 위한 한 장의 페이지",
  keywords: "생일, 기념일, 감성, 선물, 메시지, 카드, 템플릿, 나만의 페이지",
  openGraph: {
    title: "투유, 투데이",
    description: "오늘, 너를 위한 한 장의 페이지",
    url: "https://toyou-today.site",
    images: [{ url: "/img/og.png", width: 1200, height: 630, alt: "og-image" }],
    type: "website",
  },
  robots: {
    index: true,
    follow: true,
  },
  icons: {
    icon: "/img/logo-192.png",
    apple: "/img/logo-512.png",
  },
};

 

동적 메타데이터

import { Metadata } from "next";

type PropsType = Promise<{ id: string }>;

// 동적 메타데이터 설정
export async function generateMetadata({ params }: { params: PropsType }): Promise<Metadata> {
  const { id } = await params;
  const { data } = await readTemplateById(id);

  return {
    title: "To You, Today",
    description: data?.name
      ? ` ${data.name}에게 선물하는 한 장의 페이지`
      : "소중한 사람을 위한 한 장의 페이지를 선물하세요.",
    keywords: "생일, 기념일, 감성, 선물, 메시지, 카드, 템플릿, 나만의 페이지",
    openGraph: {
      title: "To You, Today",
      description: data?.name
        ? ` ${data.name}에게 선물하는 한 장의 페이지`
        : "소중한 사람을 위한 한 장의 페이지를 선물하세요.",
      url: `/templates/${data.id}`,
      images: [{ url: "/img/og.png", width: 1200, height: 630, alt: "og-image" }],
      type: "website",
    },
    robots: {
      index: true,
      follow: true,
    },
    icons: {
      icon: "/img/logo-192.png",
      apple: "/img/logo-512.png",
    },
  };
}