next.js dynamic route slug 에러

Question

next page에서 interest라는 폴더가 있고 user, company로 path를 나누려고 합니다.

interest/[id]
interest/user/[id]
interest/company/[id]

interest/[id], interest/[keyword]/[id] <- 이렇게 폴더를 만들었는데 에러가 발생하네요..

You cannot use different slug names for the same dynamic path (id !== keyword).

interest/[id]도 필요하고 interest/[keyword]도 필요할 경우 동적라우팅을 사용하는 방법이 있을까요?

성원 · Answer

next.js 공식문서를 보면 catch all routes라는 내용이 있는데 이 부분을 적용하면 될 것 같습니다.
https://nextjs.org/docs/routing/dynamic-routes

공식문서 예제를 봤을 때
pages/post/[...slug].js  이런식으로 폴더를 만들면

다음과 같은 path로 페이지에 접근할 수 있습니다.
  /post/a, 
  /post/a/b, 
  /post/a/b/c

따라서 interest/[...slug].js 이렇게 폴더를 구성하면 될 것 같습니다.