Next.js - #Dynamic route

/detail/1, /detail/2, /detail/3...

글이 세개 있다고 가정했을 때 위 이미지와 같이 각각 해당되는 이름으로 폴더와 page.js 생성하면 된다
하지만 글이 많을 경우, 전부 다 폴더와 파일을 생성할 수 없으니 Dynamic route를 사용해야 한다

Dynamic route

Dynamic route는 폴더 하나로 수많은 URL을 만들어낼 수 있다

만드는 법

폴더 생성 시, 폴더명을 []로 감싸서 만들면 URL에서 해당 부분을 아무거나 입력해도 해당 폴더의 page.js가 보여진다
누군가 /detail/아무문자 로 접속했을 때에도 page.js 를 보여준다

적용하기

Next.js의 props에는 부모에서 준 정보뿐만 아니라 Dynamic route에 입력한 params에 대한 정보도 알 수 있다

export default async function Detail(props) {
  console.log(props);  // { params: { id: '1' }, searchParams: {} }
  const db = (await connectDB).db('forum');
  const item = await db
    .collection('post')
    .findOne({ _id: new ObjectId(props.params.id) });
  
  ...
  
  );
}

이런 식으로 params의 값을 받아 DB에서 해당 하는 게시글 데이터를 가져올 수 있다