동적 메타데이터

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 15번째.

metadata 객체는 상수이므로 동적 라우트에 적용할 수 없습니다. app/dishes/[slug]/page.jsx는 모든 URL에서 서로 다른 dish를 제공하며, 각 페이지마다 고유한 title이 필요합니다.

이를 위해 대신 function을 export하세요:

export async function generateMetadata({ params }) {
    const { slug } = await params;
    return { title: DISHES[slug].name };
}

페이지가 받는 것과 동일한 params(프라미스이므로 await 사용)를 받으며, metadata 객체가 가졌던 것과 동일한 형태를 반환합니다. 동일한 파일 내에서는 둘 중 하나만 사용하고, 두 가지를 모두 사용해서는 안 됩니다.

Title 템플릿

모든 페이지의 제목에 사이트 이름을 반복하는 것은 번거로울 수 있습니다. 레이아웃은 일반 문자열 대신 패턴을 전달할 수 있습니다:

// app/layout.jsx
export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

default: 제목을 설정하지 않은 페이지를 위한 제목
template: 제목을 설정한 페이지를 위한 패턴으로, 해당 페이지의 제목이 %s 위치에 들어갑니다

따라서 title: 'Margherita'를 반환하는 페이지는 탭에서 Margherita | Coddy Eats로 표시되고, 아무것도 설정하지 않는 홈 페이지는 Coddy Eats로 유지됩니다. 브랜딩은 layout에 한 번만 작성하세요.

챌린지

중급

현재 모든 요리 페이지의 탭에는 Coddy Eats가 표시됩니다. 각 페이지에 고유한 고유한 제목을 부여하세요.

app/dishes/[slug]/page.jsx 파일에 다음과 같은 작업을 수행하는 export된 async 함수인 generateMetadata를 추가하세요:

{ params }를 받아 await를 사용하여 slug를 가져옵니다.
{ title: DISHES[slug].name }을 반환합니다.

app/layout.jsx에는 이미 템플릿 '%s | Coddy Eats'가 포함되어 있으므로, /dishes/margherita의 최종 제목은 Margherita | Coddy Eats가 되어야 합니다. 레이아웃을 확인해 보세요. 수정할 필요는 없습니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}