🌐 Next.js Metadata에 다국어 지원하기 (next-intl)

앞선 포스트에서 next-intl을 설치하고 사용하는 방법을 알아보았습니다.

이번에는 메타데이터에 적용하는 방법을 소개해 보겠습니다.

참고할 만한 공식문서 📑
1. next-intl
2. Next.js 메타데이터
3. Next.js generateMetadata()

과정

먼저, 각 json 파일에 메타데이터 내용을 작성합니다.

"Metadata": {
  "title": "...",
  "description": "...",
  ...
},

그리고 layout.tsx에 아래 코드를 작성해 줍니다.

Tip 💡 generateMetadata() 함수는 Metadata object와 함께 사용할 수 없습니다.
파일에 export const metadata: Metadata = {...};이 있다면 지워주세요.

// app/[locale]/layout.tsx

import {getTranslations} from 'next-intl/server';
 
interface Params {
    params: { locale: string };
}

export async function generateMetadata({ params: { locale } }: Params) {
    const t = await getTranslations({ locale, namespace: 'Metadata' });

    return {
        title: t('title'),
        description: t('description'),
    };
}

결과

아래와 같이 title과 description이 바뀌는 것을 확인할 수 있습니다.