Next.js에서 Dynamic Route를 활용한 게시판 구현하기 (4)

Next.js에서 Dynamic Route를 활용한 게시판 구현하기

1. Dynamic Route를 활용해보자

Next.js에서는 Dynamic Route라는 기능을 제공합니다. 이를 활용하면 URL을 동적으로 생성할 수 있습니다. 파일이나 폴더 이름을 [name] 형식으로 생성하면 됩니다. 예를 들어, /detail/[id]/page.js라고 만들면, /detail/1, /detail/2 등으로 접속할 때마다 page.js가 표시됩니다.

 

2. MongoDB에서 게시물 하나 가져오기

MongoDB에서 findOne() 메소드를 사용하면 특정 document를 가져올 수 있습니다. 예를 들어 db.collection('post').findOne({_id : new ObjectId(props.params.id)})는 id가 props.params.id와 일치하는 게시물을 가져옵니다.

 

3. URL로 게시물 구분하기

각 게시물에 대한 URL을 생성하려면, router.push(/detail/${post._id});와 같이 router.push를 사용할 수 있습니다. 이를 이용하면 게시판의 각 게시물에 대해 상세 페이지를 만들 수 있습니다.

 

 

4. 사용자가 입력한 URL 내용 가져오기

Dynamic Route의 일부인 사용자가 입력한 내용을 가져오려면, page.js 컴포넌트에 파라미터를 등록하면 됩니다. 예를 들어, console.log(props)를 실행하면, 사용자가 /detail/123과 같이 입력한 내용이 { params: { id: '123' } } 형식으로 출력됩니다.

 

 

5. 페이지 이동하기

Next.js에서 제공하는 useRouter()를 활용하면 자바스크립트 코드로 페이지 이동을 가능하게 할 수 있습니다. 예를 들어, 아래와 같이 코드를 작성하면 버튼 클릭 시 메인 페이지('/')로 이동합니다.

//jsx
import {useRouter} from 'next/router'

export default function DetailLink(){
  let router = useRouter()
  return (
    <button onClick={()=>{ router.push('/') }}>버튼</button>
  )
}

 

6. 추가 기능 활용하기

Next.js에서 제공하는 추가 기능들을 활용하면 서비스 사용성을 높일 수 있습니다.

뒤로가기: router.back()
앞으로가기: router.forward()
새로고침: router.refresh(). 

이 기능은 페이지를 완전히 새로 로드하는 것이 아니라, 이전과 바뀐 점을 분석하여 바뀐 부분만 새로고침합니다. 이를 soft refresh라고 합니다.
Prefetch 기능: router.prefetch('/path'). 이 기능을 사용하면 해당 페이지를 미리 로드할 수 있습니다. 이로 인해 사용자는 페이지를 빠르게 방문할 수 있습니다.

 

 

7. 현재 URL 확인하기

현재 URL을 확인하려면, usePathname(), useSearchParams(), useParams() 등을 활용하면 됩니다. 이 함수들은 각각 현재 URL, search parameter (query string), URL 파라미터를 출력해줍니다.

이상으로 Next.js에서 Dynamic Route를 활용하여 게시판을 구현하는 방법에 대해 알아보았습니다. 이를 통해 사용자가 게시물 제목을 클릭하면 해당 게시물의 상세 페이지로 이동하는 기능을 구현할 수 있습니다.