페이지 메타데이터

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

브라우저 탭, 북마크, Google 검색 결과, 채팅의 링크 미리보기: 이 모든 것들은 페이지의 <title> 및 <meta> 태그를 읽습니다. Next.js에서는 이러한 태그들을 직접 손으로 작성하지 않습니다.

대신, 페이지나 레이아웃은 metadata라는 객체를 export합니다:

// app/menu/page.jsx
export const metadata = {
    title: 'Our Menu',
    description: 'Everything we cook.',
};

export default function Menu() {
    return <h1>Our Menu</h1>;
}

이름이 중요합니다: 반드시 라우트 파일에서 export되는 metadata이어야 합니다. Next.js는 렌더링하는 동안 이를 읽고 여러분을 위해 head를 작성합니다.

메타데이터는 레이아웃과 동일하게 바깥쪽에서 안쪽 순서로 트리를 따라 아래로 병합됩니다. 루트 레이아웃이 기본값을 설정하면 모든 페이지가 이를 오버라이드할 수 있습니다. metadata를 export하지 않는 페이지는 레이아웃에 설정된 값을 그대로 상속받기 때문에 지금까지 모든 페이지가 루트 레이아웃의 이름을 따랐던 것입니다.

챌린지

초급

지금은 Root layout이 설정되어 있어 Coddy Eats의 모든 탭에 Coddy Eats라고 표시됩니다. 메인 메뉴 페이지에는 전용 타이틀이 필요합니다.

app/menu/page.jsx에서 컴포넌트 상단에 metadata 객체를 export하세요.
title을 정확히 Our Menu로 지정하세요.

테스트는 /에서 문서 제목을 읽은 다음 /menu로 이동하여 다시 읽습니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'Coddy Eats',
};

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