FrontEnd Next.js 13 App Dir: Metadata 적용
posted 3 months ago
App Directory에서는 기존 Head 대신 metadata를 활용해 <head> HTML 요소를 수정할 수 있습니다. metadata는 layout.js 또는 page.js파일에서 export const metadata를 통해 정의할 수 있습니다.
설명
export const metadata = {
title: { default: 'KAKAO.GG', template: '%s | KAKAO.GG' },
description: 'KAKAO.GG! Tech Blog',
keywords: ['IT', 'Coding'],
}
다양한 옵션
다양한 옵션이 존재하기 때문에 metadata를 만들 때 사용해주시면 됩니다.
- generator: 사용된 소프트웨어의 이름을 나타냅니다.
<meta name="generator" content="Next.js">
- applicationName: 웹 애플리케이션의 이름을 나타냅니다.
<meta name="application-name" content="Next.js">
- keywords: 웹 페이지의 키워드를 정의합니다.
<meta name="keywords" content="Next.js,React,JavaScript">
- authors: 웹 페이지의 작성자 정보
<meta name="author" content="cptkuk91"/>
- colorScheme: 브라우저 UI와 관련된 기본 색상 체계
<meta name="color-scheme" content="dark">
- creator: 만든이..
<meta name="creator" content="cptkuk91">
- publisher: 웹앱의 발행자나 소유자 정보
<meta name="publisher" content="cptkuk91">
Dynamic Metadata?
Dynamic Metadata를 활용하기 위해서는 단순히 metadata를 사용해서는 않됩니다. 따라서 generateMetadata를 활용해야 합니다.
다양한 제목과 내용의 게시글이 존재할 수 있기 때문에 Dynamic Metadata를 적용해줘야 합니다.
generateMetadata를 사용해 적용할 수 있습니다.
layout에 적용하는 게 아닌, post/[id]/page.tsx에 적용하겠습니다.
아래 코드를 통해 metadata를 생성할 경우, 각 Post의 title을 metadata title, metadata description으로 활용할 수 있습니다.
const getPost = async (id: string) => {
const post: PostType | null = await prisma.post.findUnique({
where: { id },
});
export const generateMetadata = async ({ params }: any): Promise<Metadata> =>
{
const data = await getData(params.id)
return {
title: data.title,
description: post?.snippet,
}
}
