Nextjs14 에서 메타 데이터 설정 방법

웹 개발에서 메타 데이터는 매우 중요합니다.

메타 데이터는 SEO 향상, 사용자 경험 개선 등 아주 도움이 되므로 매우 중요합니다.

메타 데이터를 정적, 동적으로 설정하는 방법을 알아봅시다!

 

정적 설정

layout.tsx, page.tsx 에서 아래와 같이 셋팅하면 정적으로 셋팅할 수 있습니다.

import { Metadata } from 'next'
 
// 정적 메타 데이터
export const metadata: Metadata = {
  title: 'Hello world',
}

 

만약에 자바스크립트를 사용하고 계신다면, metadata 만 export 해주면 됩니다.

export const metadata = {
  title: 'hello world',
}

 

동적 설정

동적 설정 또한 layout, page 에서 할 수 있습니다.

예를 들어, 페이지에서 locale 파라미터에 따라 번역해준다고 가정해보자.

그러면 아래와 같이 metadata 를 동적으로 설정해줄 수 있습니다.

import { Metadata } from 'next'

// 동적 메타 태그 설정
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  // locale 에 따라 동적으로 번역해주는 함수
  const translation = await getTranslation(params.locale);

  return {
    title: translation("meta.title"),
    description: translation("meta.description"),
  };
}

만약 자바스크립트를 쓴다면 Metadata 를 따로 import 받지 않으셔도 됩니다.