[Next TIL]메타데이터 다루기

➡️ 정적으로 메타데이터 주기

항상 고정된 메타데이터를 지정하는 건 metadata 객체를 정의하는 것으로 해결된다.

// app/layout.tsx

export const metadata: Metadata = {
  title: "날씨 앱",
  description: "날씨를 알려드립니다.",
};

➡️ 동적으로 메타데이터 주기

• 데이터에 따라 다른 메타데이터를 지정하기 위해선 generateMetadata라는 이름의 함수를 정의
• 함수 내에서 fetch 함수를 이용해 데이터를 가져올 수도 있으니 원하는 어떤 문구든 만들 수 있다.

// app/page.tsx 

// Link로 보내주는 값의 params에 값 넣어보내주기
    <Link href="/seoul?name=서울">서울</Link>

// app/[location]/page.tsx4

type Props ={
    params:{
        location:string
    },
    searchParams:{
        name:string
    }
}

// 동적으로 메타데이터 주기
export function generateMetadata({ searchParams }:Props){
    return{
        title:`날씨 앱 - ${searchParams.name}`,
        description: `${searchParams.name} 날씨를 알려드립니다.`,
    }
}

👍 params로 들어오는 값에 따라 메타데이터 동적으로 변경