Metadata와 Dynamic Routes

Metadata

• Next.js에는 향상된 SEO 및 웹 공유성을 위해 애플리케이션 메타데이터(ex: HTML head 엘리먼트 내의 meta 및 link 태그)를 정의하는 데 사용할 수 있는 메타데이터 API가 있다.
  https://nextjs.org/docs/app/building-your-application/optimizing/metadata

• 페이지나 레이아웃만 메타데이터를 내보낼 수 있다.

• 컴포넌트는 metadata를 내보낼 수 없고 metadata는 서버 컴포넌트에서만 있을 수 있다.
  
  
  

• 이런식으로 하면 home에서는 Home | Next Movies라는 title과 The best movies on the best framework라는 description이 나오고
  about-us에서는 About us | Next Movies라는 title과 The best movies on the best framework라는 description이 나온다.
  그리고 title을 정해주지 않은 곳은 default로 정해둔 Next Movies가 나온다.

• 이렇게 해주면 아래에 있는 사진처럼 된다.
  
  

Dynamic Routes

• 동적 세그먼트는 폴더 이름을 대괄호([folderName])로 묶어 생성할 수 있다.

export default function MovieDetail(props) {
  console.log(props)
  return <h1>Movie {id}</h1>;
}
// { params: { id: '123' }, searchParams: {} } 이런 결과가 터미널에 출력된다.

export default function MovieDetail({
  params: { id },
}: {
  params: { id: string };
}) {
  return <h1>Movie {id}</h1>;
}