트러블슈팅

next 13버젼 link 태그로 데이터 전달하기(props)

노엠디엔 2023. 8. 1. 19:31

현재 next 13 버전으로 개인 프로젝트를 진행 중이다.

postList 들 중 하나의 post를 누르면 post의 detail페이지로 이동하게끔 구현하는 도중

detail페이지에서 해당 data를 어떻게 가져올까 하다. postList에서 props를 통해 가져오는 
방식으로 구현하기 위에 link태그 안에 props를 넣을 수 있을까 했는데 넣을 수 없다는 오류가 발생했다.

그래서 link 태그안에 quey속성을 이용해서 데이터를 전달하고 받는 쪽에서는 next/louter를 사용해서 받을 수

있다고 하여 시도해 보았지만 13 버전부터 next/louter가 next/navigation으로 업데이트가 된 것 같았다.

(13버전에서는 next/router 가 사라지고? next/navigation을 사용하라는 오류가 발생함)

https://tech.wonderwall.kr/articles/Next.js%2013/  next 13 버젼 변경 사항

'use client' 상태에서 use/navigation을 import 하면서 그 안에 useRouter, useNavigation 등을 사용할 수 있다고 한다.

결론은 link 태그로 query 데이터를 담아주면 useNavition에 useSearchParams라는 것을 사용할 수 있었다.

Link
useSearchParams
데이터