티스토리 뷰

개발공부/⬛ Next.js

[Next.js 14] metadata

2024. 6. 28. 15:15

🚩 이 글은 노마드코더의 Next.js 시작하기 강의를 보고 정리한 글입니다. 

 

 

 

기본적으로 root layout에 작성되는 metadata

export const metadata = {
    title: "title",
    description: "description",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="ko">
            <body>
                {children}
            </body>
        </html>
    );
}

 

 

 

다른 page나 layout에도 작성할 수 있다.

 

예를 들어, 모든 페이지에 description은 공통으로 넣고 싶다면 root layout.tsx에 작성하고

 

 

 

페이지별로 title을 다르게 하고 싶다면 해당 page.tsx에 작성한다.

 

 

그러면 metadata들이 병합되어 보여진다.

 

metadata는 페이지와 레이아웃에서만 사용할 수 있고, 컴포넌트에서는 내보낼 수 없다.

또한, metadata는 server 컴포너트에서만 작성할 수 있다. (client 컴포넌트에서는 불가능)

 

 

 

 

 

 

title을 표기할 때 "회사소개 | DAYCOMPANY", "포트폴리오 | DAYCOMPANY" 같이

반복되는 부분이 있다면 메타데이터에 대한 템플릿을 만들 수 있다.

// root layout

export const metadata: Metadata = {
    title: {
        template: "%s | DAYCOMPANY",
        default: "DAYCOMPANY",
    },
    description: "DAY COMPANY 홈페이지입니다.",
};

 

기본값 작성 필요

 

 

각 페이지에 작성해준 title이 root layout에 title template으로 지정해준 %s 위치에 들어간다.

export const metadata = {
    title: "회사소개",
};

 

 

 

다양한 metadata 필드들은 nextjs 공식문서에서 확인할 수 있다.

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-fields

 

Functions: generateMetadata | Next.js

Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.

nextjs.org

 

 

 

 

 

 

동적 메타데이터를 적용하는 방법은 generateMetadata()를 사용하면 된다.

export async function generateMetadata({ params: { id } }: IParams) {
    const movie = await getMovie(id);

    return {
        title: movie.title,
    };
}

export default async function Movies({ params: { id } }: IParams) {
    return (
        <div>
            <Suspense fallback={<h1>Loading Movie Info...</h1>}>
                <MovieInfo id={id} />
            </Suspense>
            <Suspense fallback={<h1>Loading Movie Videos...</h1>}>
                <MovieVideos id={id} />
            </Suspense>
        </div>
    );
}

 

위 예시 코드는 url의 id값을 받아와 그 id값으로 getMovie라는 API를 호출해서 영화의 title을 동적인 메타데이터로 적용한다.

 

 

 

반응형
프로필사진
개발자 삐롱히

프론트엔드 개발자 삐롱히의 개발 & 공부 기록 블로그