[Next.js 15] 메타데이터(Metadata) 설정하기

메타데이터 API는 각 페이지에 대해 문서의 제목(title), 설명(description), 썸네일, 오픈그래프 정보 등을 젖의할 수 있는 강력한 기능이다.
이렇게 설정된 메타데이터는 브라우저 탭 제목, 검색엔진 노출, SNS 공유시 미리보기 정보(OG) 등에 활용된다.

📌 메타데이터 설정 = SEO와 OG 태그를 직접 다루는 방식!

---

메타데이터 설정 위치

메타데이터는 서버 컴포넌트인 아래 두 파일에서 설정 가능하다.

• layout.tsx  →   전역 적용
• page.tsx      →   해당 페이지에만 적용

두 경우 모두 아래 방식으로 설정 가능하다:

• 정적 메타데이터 객체를 export
• 동적으로 생성하는 함수(generateMetadata)를 export

---

정적 메타데이터 예시

// app/about/page.tsx
export const metadata = {
  title : "About"
}
export default function About() {
    return <h1>about</h1>;
  }

---

동적 메타데이터 예시

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: { params: { slug: string } }) {
  const title = decodeURIComponent(params.slug);
  return {
    title: `${title} | My Blog`,
    description: `읽고 있는 글: ${title}`,
  };
}

---

📝 제목(title) 필드 설정 방식

1. 문자열로 설정

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

2. 객체로 세부 설정 (default + template )

// app/layout.tsx
export const metadata = {
  title: {
    default: "Next.js - Codevolution",
    template: "%s | Codevolution",
  },
};

• default   : 아무 설정 없을때 기본 제목
• template : 각 페이지 제목에 자동으로 붙는 형식 (%s는 페이지 제목 자리)

템플릿이 지정된 경우에

export const metadata = {
  title : "About"
}
export default function About() {
    return <h1>about</h1>;
  }

결과 :<title>About | Codevolution</title>

3. absolute로 부모 레이아웃 title 무시

import { Metadata } from "next";
export const metadata: Metadata = {
  title: {
    absolute: "Blog",
  },
};
export default function About() {
  return <h1>about</h1>;
}

결과 : <title>Blog</title>
(부모의 template이나 default 설정을 무시하고 고정 absolute 제목 적용)

---

⚠️ 클라이언트 컴포넌트에서 메타데이터 설정 불가

"use client"; // 클라이언트 컴포넌트에서는 metadata 사용 불가

export const metadata = {
  title: "❌ 오류 발생",
};

• metadata는 서버 컴포넌트에서만 export 가능
• 서버 컴포넌트에서 클라이언트 컴포넌트를 import하는 방식으로 사용하자.

예제: 서버 컴포넌트 + 클라이언트 컴포넌트 조합

메타데이터는 서버 컴포넌트에서 설정하고, 클라이언트 컴포넌트를 import하여 사용할 수 있다.

// app/counter/page.tsx
import { Counter } from "./counter";

export const metadata = {
  title: "Counter",
};

export default function CounterPage() {
  return <Counter />;
}

// app/counter/counter.tsx
"use client";

import { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count : {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};