NextJs (4) Metadata, Routes Groups, Dynamic Routes

📚 Metadata

💡 Metadata는 꼭 export 해야하는 객체로써 페이지에 head 부분에 표시됨.

• 메타데이터는 레이아웃이 중첩되는 방식과 마찬가지로 메타데이터는 병합이 됨.
• 페이지나 레이아웃만 메타데이터를 export 할 수 있음.
• 메타데이터는 서버 컴포넌트에서만 있을 수 있음.

// app/layout.tsx

export const metadata: Metadata = {
  title: {
    template: "%s | Movies", 
    // template에 %s 부분에 각 페이지별로 지정한 metadata의 타이틀값을 받게됨.
 
    default: "Loading...",
    // metadata의 타이틀을 지정하지 않을 시 사용되는 기본 값.
  },
 
  description: "The Best movies on the framework",
  // 만일 description을 공유하고 싶을 경우 작성 법.
};

// app/home/page.tsx

export const metadata = {
  title: "Home", // metadata의 타이틀을 지정하는 방법
};

export default function Page() {
  return (...)
}

📚 Dynamic Metadata

💡 동적으로 변하는 메타데이터 생성 방법 : generateMetadata()

• generateMetadata는 동적인 제목을 가지고 있는 페이지를 위해 존재 함.
• nextjs에서 동적으로 바뀌는 페이지인 [id] 내부에 파일들에는 사용할 수 있음.
• 웹사이트의 head를 동적으로 바꿔주고, 원하는 제목과 meta tag들을 사용할 수 있게 됨.

// app/(movies)/movies/[id]/page.tsx
export async function generateMetadata({ params: { id } }: iParams) {
  const movie = await getMovie(id);
  return {
    title: movie.title,
  };
}

📚 Routes Groups

💡 nextjs에서는 routes를 그룹화해서 logical groups로 만들 수 있음.

• 현재 app에 루트파일에는 3개의 파일이 존재함.

• 그 중 home페이지로 특정되는 것은 page.tsx 하나 뿐이므로 다음과 같이 정리.
  • 다음과 같이 (home)처럼 소괄호를 사용해서 폴더 이름을 지정해주면 url을 생성해주지 않는다.

📚 Dynamic Routes란

💡 Dynamic Routes란 /movies/:Id 와 같이 url이 동적으로 작성되게 하는 것을 의미 한다.

• nextjs에서 Dynamic Routes 생성 법 ->
  • /app/(movies)/[movies]/[id]/pages.tsx 다음과 같이 작성을 해주어야 함.

// app/(movies)/[movies]/[id]/pages.tsx
export const metadata = {
  title: "Movie",
};

export default function MovieDetail({
  params: { id }, 
    // nextJs 내장기능으로 url에서 id에 해당하는 변수를 받아오기 위한 방법. 
}: {
  params: { id: string };
}) {
  return (
    <div>
      <h1>Movie {id} </h1>
    </div>
  );
}

// props
export default function MovieDetail(props){
  console.log(props) // 백엔드에서만 실행 { params: {id : 32313123}, searchParams: {} }
}