[ ]
폴더를 만든다.
예를 들어 /detail/[id]/pages.js 로 만들었을 경우,
/detail/ 뒤에 아무렇게나 입력해도 해당 page.js
를 보여준다.
이대로 끝내면 어느 것을 입력하든 동일한 page.js
가 나올 것이다.
/detail/(게시물의 id) 를 입력하면 해당 게시물이 나오도록 해야 한다.
동적 라우팅을 위한 조치는 다음과 같다.
findOne()
을 통해 보여줄 page를 특정한다.id
로 설정하였다.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) });
return (
<div>
<h4>상세페이지</h4>
<h4>{result.title}</h4>
<p>{result.content}</p>
</div>
);
}
Link
를 이용하여 유저가 특정 게시물을 클릭했을 시, 해당 게시물의 id
가 /detail/ 뒤로 붙도록 한다.import { connectDB } from '@/util/database';
import Link from 'next/link';
export default async function List() {
const client = await connectDB;
const db = client.db('forum');
let result = await db.collection('post').find().toArray();
return (
<div className="list-bg">
{result.map((e, i) => {
return (
<div className="list-item" key={i}>
<Link href={'/detail/' + result[i]._id}>{e.title}</Link>
<p>{e.content}</p>
</div>
);
})}
</div>
);
}