next proxy 설정으로 인해, pages 동적 라우팅이 안되는 경우....

Question

async rewrites() { return [ { source: &#96;${process.env.NEXT_PUBLIC_APP_BACKEND_PATH}&#96;, (/api/:path*) destination: &#96;${process.env.NEXT_PUBLIC_APP_BACKENDN_BASEURL}&#96;, }, { source: &#96;${process.env.NEXT_PUBLIC_APP_BACKEND_COMMON_PATH}&#96;,(/common/:path*) destination: &#96;${process.env.NEXT_PUBLIC_APP_BACKEND_COMMON_BASEURL}&#96;, }, ]; },next.config에 해당 프록시를 설정했습니다.이런식으로 설정을 했더니,pagescommon[list].tsx파일로 화면 라우팅을 시도하면... {&#34;resultCode&#34;:&#34;9999&#34;,&#34;msg&#34;:&#34;NOT_FOUND No endpoint GET /common/commonCode.&#34;,&#34;data&#34;:{},&#34;timeZone&#34;:&#34;UTC&#34;,&#34;timeStamp&#34;:1690335590763,&#34;languageCode&#34;:&#34;KR&#34;}에러가 발생합니다.원래 프록시 쓴 이유는 axios로 통신 할 때, 변경을 위한 부분인데,라우팅 될 때도 먹히면서 안되는 것 같은데... 방법이 있을 까요?아니면 동적으로는 페이지를 못 쓰나요?*[list].tsx 말고 common 폴더 하위에 commonCode 폴더를 만들고, index.tsx 로 하면은 나옴... 대신 그런식으로 하면 너무 많은 하위 폴더가 생겨서... 동적으로 [list] 로 묶어둔 상황입니다.

Hee Sung Son · Accepted Answer

nextjs 예제를 보니 동적으로 할당하기 위해서는module.exports = { async rewrites() { return [ { source: '/:first/:second', destination: '/:first?second=:second', // Since the :first parameter is used in the destination the :second parameter // will not automatically be added in the query although we can manually add it // as shown above }, ] }, }형태로 해야한다고 나와있네요. 참고해서 작성하시면 될거 같습니다.거기에 지금 적으신 패턴에 env파일을 보지못해서 잘모르겠지만 /:path*가 source와 destination 둘다 포함되어 있는지 확인이 필요해 보입니다.

dasdffqwf · Answer

환경변수 설정이 어찌 돼있는지 모르겠지만 BASE_URL이 말 그대로 홈페이지 루트 주소라고 가정합니다. 사용자가 BASE_URL/common/1 로 들어왔습니다. 그러면 next에서 pages/common/[list].tsx 이랑 매칭이 될까요? 아닙니다. pages/index.tsx 랑 매칭이 되는거죠. 설정이 /common/:path*로 들어오면 BASE_URL으로 리디렉션 되게 돼있잖아요? 그리고 /common/commonCode 해당 경로는 동적인 경로가 아닌 정적인 경로입니다 pages에서 commonCode .tsx 작성했다고 하면요 . 그런데 rewrites에서 작성한거는 /common/:path* 동적경로죠? 그러니 rewrites에서 설정한 프록시랑 URL 매칭이 안되니 해당 코드가 작동안되니깐 정상 출력되는거에요.

next proxy 설정으로 인해, pages 동적 라우팅이 안되는 경우....

2개의 답변

#proxy 목록