next.js 에서 상세페이지 만드는 방법은 두가지가 있다.
1. dynamic route 만들기
블로그 글, 여러가지 상품 목록 등 페이지 URL이 비슷한데 여러개가 필요할 때 하나하나 만들 수 없겠죠? 이를 한번에 해결하기 위한 방법으로 dynamic route를 만들어 해결할 수 있습니다.
-
예를 들어 /detail/[id]/page.js 이런 식의 폴더, 파일 구조를 만들어 놓으면
/detail/아무거나 id 번호 로 접속했을 때 page.js 를 보여줍니다. -
블로그의 각 글이나 쇼핑몰의 각 상품들은 각각 고유 id를 가지고 있습니다. 이를 이용하여 해당 글, 상품을 클릭 했을 때 고유 id를 사용한 URL로 라우트 되도록
Link 태그를 사용하여 라우팅 할 수 있습니다. -
그럼 고유 id를 사용한 URL로 라우팅이 되었다면 해당 id 마다 page.js에서 보여주는 화면이 달라야 할텐데 이를 어떻게 보여줄 수 있을까요?
결론 : props를 사용하면 됩니다!!
props는 보통 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 용도로 사용되는 걸로만 알 고 있었는데 이 props에 URL의 정보가 담깁니다. -
예를 들어 현재 /detail/[id]/page.js 이와 같은 파일구조가 있을 때 URL에 detail/123 이 URL로 방문하고 props를 콘솔 찍어보면
{ id : '123' }이 출력되는걸 알 수 있습니다. 이를URL 파라미터라고 합니다.
2. useRouter 사용하기
use~~ 문법은 client component에만 사용 가능합니다!
import { useRouter } from 'next/navigation'
export default function DetailLink() {
let router = useRouter()
return (
<button onClick={() => { router.push('/') }}>버튼</button>
)
}이 방법은 원래 사용하던 useNavigate()와 비슷하여 이해하기 쉬울거라 생각합니다.
router.push('/경로') 이 문법을 원하는 곳에 사용하여 바로 라우팅이 가능하고, 이때도 마찬가지로 특정 글, 상품의 고유 id로 라우팅하고 싶다면 URL의 정보를 props로 받아와서 라우팅할 수 있습니다.
