Next.js 14 가장 기본적인 Metadata 설정

Next.js를 사용하면 SEO 최적화라는 얘기가 나옵니다. SSR을 통한 SEO 최적화도 맞지만, 공유성을 높이기 위해서는 Metadata 관리에 대해서도 빠질 수 없습니다.

Next.js Metadata란?

Metadata는 Next.js에서만 사용하는 게 아닙니다. 검색 엔진과 소셜 미디어 플랫폼에서 웹 페이지를 최적화하는 데 중요한 역할을 합니다.

Config-based Metadata: layout.js 또는 page.js 파일 내에서 정적 또는 동적 metadata객체를 정의합니다. 정적 metadata는 간단하고 고정 된 반면, 동적 metadata는 page 또는 route에 따라 달라질 수 있습니다.
File-based Metadata: 특정 파일을 metadata에 정의하는 방식으로, Opengraph Image와 Favicon과 같은 metadata를 정의할 때 사용됩니다. 파일들은 정적으로 제공되거나 빌드 과정에서 동적으로 생성될 수 있습니다.

정적 Metadata 구현

layout 또는 page.tsx 파일 상단에 작성하면 됩니다. 아래는 작성 예시입니다.

// layout.tsx 또는 page.tsx 파일에서
import { Metadata } from 'next';
export const metadata: Metadata = {
  title: '페이지 제목',
  description: '페이지에 대한 간단한 설명',
};

동적 Metadata 구현

route parameter 또는 외부 데이터에 기반하며 Metadata를 조정할 수 있게 해줍니다. [id]/page.tsx와 같은 동적 페이지 파일에 적합합니다.

import { Metadata, ResolvingMetadata } from 'next';
type Props = {
  params: { id: string };
};
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const data = await fetch(`https://yourapi.com/data/${params.id}`).then(res => res.json());
  return {
    title: data.title,
    description: data.description,
  };
}

Opengraph Image 또는 Favicon과 같은 데이터는 동적 Metadata에서 제공될 수 있으며 요구 사항에 따라 정적, 동적으로 생성될 수 있습니다.