티스토리 뷰
🚩 이 글은 노마드코더의 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
동적 메타데이터를 적용하는 방법은 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을 동적인 메타데이터로 적용한다.
'개발공부 > ⬛ Next.js' 카테고리의 다른 글
[Next.js] 사전 렌더링 이해하기 (0) | 2024.08.30 |
---|---|
[Next.js 14] Parallel Requests (1) | 2024.07.10 |
[Next.js 14] 서버 컴포넌트에서의 data fetching (1) | 2024.07.09 |
[Next.js 14] layout.tsx (0) | 2024.06.28 |
[Next.js 14] Hydration과 "use client" (0) | 2024.06.27 |
프론트엔드 개발자 삐롱히의 개발 & 공부 기록 블로그