[NextJs] 동적 Routes

동적 Routes 설정법

동적 세그먼트는 폴더 이름을 대괄호로 묶음으로써 생성할 수 있습니다.

ex) [id].js

import UserLink from 'next/link';

 

<UserLink

       href={{

              pathname: '/center/user/[id]',

              query: { id: order.userID }

       }}

 >

 ...

</UserLink>

Route: pages/user/[id].js

Example URL : /user/1

 

---

 

query 설정을 안 해주면 아래와 같은 에러가 난다

Error: The provided `href` (/center/user/[id]) value is missing query values (id) to be interpolated properly. Read more: https://nextjs.org/docs/messages/href-interpolation-failed

 

 

 

 

 

 

 

reference

https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

Routing: Dynamic Routes | Next.js