FrontEnd Next.js 13 App Dir: Metadata 적용

App Directory에서는 기존 Head 대신 metadata를 활용해 <head> HTML 요소를 수정할 수 있습니다. metadata는 layout.js 또는 page.js파일에서 export const metadata를 통해 정의할 수 있습니다.

설명

layout.js

export const metadata = {
  title: { default: 'KAKAO.GG', template: '%s | KAKAO.GG' },
  description: 'KAKAO.GG! Tech Blog',
  keywords: ['IT', 'Coding'],
}

다양한 옵션

다양한 옵션이 존재하기 때문에 metadata를 만들 때 사용해주시면 됩니다.

  • Name
    generator
    Type
    옵션
    Description

    사용된 소프트웨어의 이름을 나타냅니다

    <meta name="generator" content="Next.js">
    
  • Name
    applicationName
    Type
    옵션
    Description

    웹 애플리케이션의 이름을 나타냅니다.

    <meta name="application-name" content="Next.js">
    
  • Name
    referrer
    Type
    옵션
    Description

    브라우저가 HTTP Referrer 헤더를 어떻게 보낼지 지시

    <meta name="referrer" content="origin-when-cross-origin">
    
  • Name
    keywords
    Type
    옵션
    Description

    웹 페이지의 키워드를 정의

    <meta name="keywords" content="Next.js,React,JavaScript">
    
  • Name
    authors
    Type
    옵션
    Description

    웹페이지의 작성자 정보

    <meta name="author" content="cptkuk91"/>
    
  • Name
    colorScheme
    Type
    옵션
    Description

    브라우저 UI와 관련된 기본 색상 체계

    <meta name="color-scheme" content="dark">
    
  • Name
    creator
    Type
    Description
    <meta name="creator" content="cptkuk91">
    
  • Name
    publisher
    Type
    옵션
    Description

    앱의 발행자나 소유자 정보

    <meta name="publisher" content="cptkuk91">
    
nextjs13

Dynamic Metadata?

Dynamic Metadata를 활용하기 위해서는 단순히 metadata를 사용해서는 않됩니다. 따라서 generateMetadata를 활용해야 합니다.

다양한 제목과 내용의 게시글이 존재할 수 있기 때문에 Dynamic Metadata를 적용해줘야 합니다.

generateMetadata를 사용해 적용할 수 있습니다.

layout에 적용하는 게 아닌, post/[id]/page.tsx에 적용하겠습니다.

아래 코드를 통해 metadata를 생성할 경우, 각 Post의 title을 metadata title, metadata description으로 활용할 수 있습니다.

/app/post/[id]/page.tsx

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,
    }
}