Nextjs 13 에서 동적 라우팅사용하기

detail/[동적 라우팅]/page.tsx 로 만들어주면 detail/1234 로 들어오는 url 값이 날라옵니다.

보통 상세페이지 조회시 id 값을 받아 페이지를 로드해줍니다.

import { redirect } from "next/navigation"; 를 사용해서 id 값으로 검색했는데 없어서 에러가 발생한 경우, redirect 를 치도록 예외처리합니다.

import { connectDB } from "@/util/db"
import { ObjectId } from "mongodb";
import { redirect } from "next/navigation";

export default async function DetailPage(props: any) {
  let title = ''
  let content = ''

  try {
    const { id }  = props.params
    const client = await connectDB;
    const db = client.db('<database name>')
    const data = await db.collection('post').findOne({_id: new ObjectId(id)})
    title = data.title
    content = data.content
  } catch (error) {
    console.log('없는 detail 페이지입니다.', error)
    redirect('/list')
  }

  return (
    <div>
      <h4>{title}</h4>
      <p>{content}</p>
    </div>
  )
}

useRouter

useRouter 를 사용해서 라우팅 컴포넌트를 직접 생성하여 라우팅을 조작할 수 있습니다.

'use client'
import { useRouter } from "next/navigation"

export default function DetailLink(props: any) {
  const { id } = props
  const router = useRouter()
  return (
    <button type="button" onClick={() => router.push(`/detail/${id}`)}>
      상세보기
    </button>
  )
}