포스트

Next.js 12->13 변경 metadata 작성법

게시
By 1 분읽는 시간

metadata를 다루는 방식의 변화가 생김

Next 12의 경우

Next.js 12 이전에는 next/head 컴포넌트를 사용하여 메타데이터를 설정.

1
2
3
4
5
6
7
8
9
10
11
12

import Head from 'next/head';

export default function Page() {
  return (
    <Head>
      <title>My Page Title</title>
      <meta name="description" content="My Page Description" />
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <p>This is my page</p>
  );
}

다음과 같이 메타데이터를 기록 하였다.

Next 13의 경우

Next.js 13부터는 next/head 컴포넌트 대신 Metadata 라이브러리를 사용하여 메타데이터를 설정. Metadata API는 페이지의 메타데이터를 정의하는 객체를 제공

1
2
3
4
5
6
7
8
9
10
11

import { Metadata } from "next";

export const metadata: Metadata = {
  title: "My Page Title",
  description: "My Page Description",
  icon: "/favicon.ico"
};

export default function Page() {
  return <p>page</p>;
}

동적 Metadata 사용법

generateMetadata 함수를 사용하여 동적 라우팅에서 메타데이터를 설정

1
2
3
4
5
6
7
8
9
10
11

import { Metadata, generateMetadata } from "next";

export const metadata: Metadata = {
  title: generateMetadata("title"),
  description: generateMetadata("description"),
  icon: generateMetadata("icon")
};

export default function Page({ title, description, icon }) {
  return <p>This is my page</p>;
}
Nextjs
next metadata
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.