Next.js 메타데이터, 동적 메타데이터, params

 

Metadata 설정

 

Metadata는 Next.js에서 페이지의 메타데이터를 설정하는 객체이며

사용자 경험을 개선하는 데 중요하고  SEO와 각 페이지의 고유한 정보를 설정할 수 있음

// 전체 layout.tsx
export const metadata: Metadata = {
  title: "LoL",
  description: "롤 정보 페이지",
  icons: {
    icon: "/images/fav2.png",
  },
};

1. title: 브라우저 탭에 표시되는 페이지 제목 
2. description: 페이지 설명으로, 주로 검색 엔진에서 사용됨
3. icons: 브라우저의 탭에 표시될 아이콘의 경로 설정

 

근데 이제 icons의 경우 public/images 폴더 안에 이미지를 넣어서 사용했는데

public/images를   src 밖에 즉 루트 경로에 두지 않으면 이미지를 읽어오지 못한다

또 jpg파일이 아닌 png나 ico와 같은 파일 형식으로 넣어주어야 잘 읽어오는 듯 하다

 

 

동적 Metadata

또 동적으로 메타데이터를 설정해야 하는 경우가 있다

id값에 따른 상세페이지가 그 예시인데 그럴 경우 아래 코드 예시처럼 작성이 가능한데

 

export function generateMetadata({ params }: Props) {
  return {
    title: `${params.id} 상세페이지`,
    description: `${params.id}의 정보를 제공하는 상세페이지`,
  };
}

 

generateMetadata 함수는 Next.js에서 동적 라우팅을 사용할 때, 각 페이지에 대한 메타데이터를 생성하는 데 사용되고

이 함수는 페이지가 렌더링될 때 해당 페이지에 맞는 제목과 설명을 동적으로 설정할 수 있게 해준다

 

그 안에 title이나 description은 위 내용의 설명과 같아서 생략하는데 여기서 params에 대한 기록을 조금 해야할 듯 싶다

 

params ->

params는 부모 경로부터 시작해서 [](대괄호)로 감싸진 세그먼트의 정보를 읽어오는데 

 

만약 부모/[자식1]/자식2/[자식3] 이런식으로 URL 경로가 지정되어 있다면

 

params 속에는 객체 형식으로

 

{자식1: "설정된 자식의 데이터", 자식3: "셋째"} 

 

이렇게 데이터가 담기게 된다 따라서 params.id는 [id] 세그먼트의 데이터를 추출하여 사용된 것!

 

 

 

끝으로 메타 데이터를 설정하면서 아주 궁금했던

params에 대한 의문도 해결할 수 있어서 좋았따 끄으읕!