[NEXT] Dynamic Routes

Next.js에서는 page에 대괄호([param])을 추가하여 Dynamic Route를 생성할 수 있음

 

만든 페이지로 예를 들어보자

해당 영화를 누를시 링크 설정을 다음과 같이 설정하였다.

//index.js
export default function Home({results}) {
  return (
    <div className="wrap">
      <Seo title = "Home"/>
      {results?.map(m => 
      <Link href = {`/movies/${m.original_title}/${m.id}`} key = {m.id}>
      ...

이러면 pages/movies폴더 안 에 있는 [...params].js로 이동할 것이다

...은 moives뒤에 오는 모든 변수들을 의미한다.

 

그 후 [...params].js에서 params정보를 받아 getServerSideProps에서 다음과 같이 이용해준다.

//[...params].js

export default function Detail({data}){

}

export async function getServerSideProps({ params: { params } }) {
    const data = await (await fetch(`localhost:3000/api/movies/${params[1]}`)).json();
    return {
      props: { data },
    };
  }

 

혹시 그냥 movies/에 대한 경로를 보여주고 싶다면 movies폴더에 index.js를 만들어준다.