<head> 대신 metadata 객체 사용하기
1️⃣ 기존 <head> 사용 방식과 문제점
Next.js의 Pages Router에서는 _app.js 또는 _document.js 에서 <Head> 컴포넌트를 사용하여 메타태그를 관리했습니다.
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>My Next.js App</title>
<meta name="description" content="This is a Next.js application" />
</Head>
<h1>Welcome to My App</h1>
</>
);
}
하지만, **App Router (app/ 디렉토리 사용)**에서는 이러한 방식 대신 metadata 객체를 사용하여 페이지별 SEO 데이터를 선언적으로 설정할 수 있습니다.
2️⃣ metadata 객체 사용 방식
App Router에서는 page.tsx 또는 layout.tsx 파일에서 metadata 객체를 사용하여 메타데이터를 정의할 수 있습니다.
🔹 기본적인 metadata 객체 사용
export const metadata = {
title: "My Next.js App",
description: "This is a Next.js application",
};
export default function Home() {
return <h1>Welcome to My App</h1>;
}
✔️ Next.js가 자동으로 <head>에 해당하는 메타데이터를 삽입해줍니다.
🔹 generateMetadata를 사용한 동적 메타데이터 설정
정적인 metadata 객체 뿐만 아니라, 동적으로 메타데이터를 생성하려면 generateMetadata 함수를 사용할 수 있습니다.
import { Metadata } from "next";
type Props = {
params: { id: string };
};
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const post = await fetch(`https://api.example.com/posts/${params.id}`).then((res) => res.json());
return {
title: post.title,
description: post.description,
};
}
export default function PostPage({ params }: Props) {
return <h1>Post {params.id}</h1>;
}
✔️ 페이지가 렌더링될 때 동적으로 SEO 메타데이터를 변경할 수 있습니다.
metadata 객체의 다양한 속성
metadata 객체는 단순히 title과 description뿐만 아니라, 다음과 같은 다양한 SEO 속성을 지원합니다.
export const metadata = {
title: "My Awesome App",
description: "This is an awesome Next.js app",
keywords: ["Next.js", "SEO", "metadata"],
authors: [{ name: "John Doe", url: "https://johndoe.com" }],
openGraph: {
title: "My Awesome App",
description: "Best app built with Next.js!",
url: "https://myapp.com",
siteName: "MyApp",
images: [
{
url: "https://myapp.com/og-image.jpg",
width: 1200,
height: 630,
},
],
type: "website",
},
twitter: {
card: "summary_large_image",
site: "@myapp",
title: "My Awesome App",
description: "Best app built with Next.js!",
images: ["https://myapp.com/twitter-image.jpg"],
},
};
openGraph: Facebook, Linkedln 등에서 공유할 때 나타나는 미리보기 정보 설정twitter: 트위터에서 공유할 때의 미리보기 설정
4️⃣ metadata 객체를 사용할 때의 장점
- 자동 최적화: Next.js가 필요한
<meta>태그를 자동으로 최적화해서 렌더링합니다. - 더 나은 DX (개발자 경험): 메타데이터를 선언적으로 관리할 수 있어 유지보수성이 높아집니다.
- 동적 메타데이터 지원:
generateMetadata를 활용하면 API 데이터를 기반으로 SEO 최적화 가능합니다.