Next.js 페이지 전환 시 MongoDB ObjectId() 사용하기

list에서 상품 클릭 시 해당 상품의 detail 페이지로 이동하게 하려고 한다.

 

먼저 Detail에서는 props를 이용했다.

/Detail/id 형식의 url을 사용하고 싶기 때문에 id 부분에 ObjectId()를 어떻게 넣는 지가 관건이었다.

 

console.log(props)를 해보았다. 

위의 id가 내가 url에 붙여넣고 싶은 Objectid이기 때문에 props.params.id로 사용하고자 하는 id값을 가져왔다.

입력한 id의 데이터만 가져오고 싶기 때문에 findOne()을 사용했고

변수에 넣어서 데이터 출력 시 활용했다.

 

아 ObjectId()를 사용할 때에는 꼭! import를 해줘야 한다.

 

import { connectDB } from "@/util/database";

import { ObjectId } from "mongodb";

export default async function Detail(props) {

  const db = (await connectDB).db("forum");

  let result = await db.collection("post").findOne({ _id: new ObjectId(props.params.id) });

  console.log(props);

  return (

    <div>

      <h4>상세페이지</h4>

      <h4>{result.title}</h4>

      <p>{result.content}</p>

    </div>

  );

}

 

 

list 페이지에서는 글 제목에 <Link> 태그를 넣어 페이지 전환을 가능하게 해주었고

href에 ObjectId()를 넣어 선택한 글에 해당되는 ObjectId()가 자동으로 url에 등록되게 했다.

console.log(item._id) 를 해보면

이런 형식으로 ObjectId()가 나오는데 순간 substr() 같은 문자열 함수로 으로 잘라내야 하나..? 하는 생각을 해서 잠깐 헤맸다.

지금 생각해보면 Object형식을 문자열 함수로 자르는건 너무 말이 안되는데..ㅋㅋㅋㅋ

하지만 구글링으로 바로 해결~!

toString()만 써주면 바로 id만 추출된다.

 

          <Link href={`/detail/` + item._id.toString()}>

 

 

참고 사이트

https://www.mongodb.com/docs/manual/reference/method/ObjectId/

ObjectId() — MongoDB Manual