next.js Link 와 useRouter를 사용해 props 전달하기

Link로 동적라우팅 사용할때 props전달 하는 방법!

//app.js

import Link from "next/link"
const obj = {name:'cccyyyy'}

<Link
href={{
pathname: `/view/[id]`, // 라우팅 id
query: { currentName: JSON.stringify(obj) }, // props 
}}
as={`/view/[id]`} //url에 표시할 query
>
	<a>이동</a>
</Link>

pathname : 해당하는 라우팅
query : 전달할 props를 넣어주고 현재 obj가 object인 상태이기 때문에 문자열로 바꿔주기위해 JSON.stringify()를 사용.
as: props전달할때 url뒤에 표시

 

//[id].js

import { useRouter } from "next/router"

const view ()=> {
  const router = useRouter()
  const { currentName } = router.query
  const currentPost = JSON.parse(name)

(...)
}

router.query에 전달된 props를 다시 객체로 바꿔준다!