[Next.js] Dynamic route

[ ] 폴더를 만든다.
예를 들어 /detail/[id]/pages.js 로 만들었을 경우,
/detail/ 뒤에 아무렇게나 입력해도 해당 page.js를 보여준다.

이대로 끝내면 어느 것을 입력하든 동일한 page.js가 나올 것이다.
/detail/(게시물의 id) 를 입력하면 해당 게시물이 나오도록 해야 한다.
동적 라우팅을 위한 조치는 다음과 같다.

1. 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>
    );
}

2. 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>
    );
}