Next.js - Metadata

Metadata

https://nextjs.org/docs/app/api-reference/file-conventions/metadata

- 제일 상위 폴더의 layout에서 metadata 정의

 

하위 폴더의 layout에서 metadata를 정의하면 폴더별로 다른 metadata의 title과 desc를 가질 수 있다. 만약 지정하지 않으면 최상위 폴더의 metadata를 덮어쓰게 된다.

 

export const metadata = {
  title: { default: "나영의 블로그", template: "나영의 블로그 | %s" },
  description: "나영이의 블로그입니다",
};
// main layout

 

 

- dynamic한 metadata를 정의할 수도 있다.

 

export async function generateMetadata({
  params: { slug },
}: Props): Promise<Metadata> {
  const post = await getPostData(slug);
  const { title, description } = post;
  return {
    title,
    description,
  };
}

//SSR
export default function PostPage({ params }: Props) {
  if (params.post === "nothing") {
    notFound();
  }
  return <div>{params.post} Post</div>;
}

db와 통신할경우 비동기로 동작하게 만들어야함 async/await으로