[Next.js] 개인과제 트러블슈팅 (동적 라우팅 경로, 클라이언트 컴포넌트 환경변수, Module not found)

첫 next.js 프로젝트를 진행하며 해결한 오류들을 모아보았다

 

동적라우팅된 페이지 경로에 의문의 데이터 등장

문제

아이템 상세 페이지의 경로에서 해당 아이템의 id를 받아와 전체 데이터에서 아이템에 해당하는 정보를 받아오려는데, 계속 undefined가 떴다. 정확한 id를 받아오고있는지 확인해보니 1004 와같은 아이디 외에 의문의 데이터가 있었다.

 

아이템마다 달라지는 값인지 확인해보았더니, 모든 아이템의 경로에 동일하게 %7D가 추가되고있었다.

 

해결

모두 동일하게 특정 값이 추가되고 있다면 다른 것보다 이동하는 경로를 지정해주는 곳에서 뭔가 실수가 있을 것이라 추측이 됐다. 아이템, 챔피언 썸네일과 이름을 보여주는 카드에서 클릭시 이동할 경로를 지정해주고 있었는데(Link의 href) 그곳을 확인해보니 items의 디테일 경로에 }가 하나 잘못 입력되어있었다.

 

잘못 입력된 }를 지우니 의도대로 경로가 설정됐다!

 

 

빌드 후 실행 시 환경변수 인식 오류

문제

yarn dev로 실행한 develop 환경에서는 환경변수를 문제없이 인식했는데, build 후 실행하자 환경변수를 잘못 인식하는 오류가 발생했다.

정상적으로 동작한다면 (...)3000/api/rotation 경로에 요청을 해야하는데, (...)3000/undefined/api/rotation으로 중간에 이상한 경로가 끼어있었다.

 

해결

클라이언트 컴포넌트에서는 환경변수 앞에 NEXT_PUBLIC_ 접두사를 붙여줘야한다고 한다. 아래와같이 환경변수에 접두사를 추가했고, 정상적인 경로로 요청하는 것을 확인했다.

 

 

vercel 배포시 임포트 경로 인식 오류

문제

Module not found: Can't resolve '/rabbit.gif'

다른 경로는 모두 문제가 없는데 public 폴더의 정적 파일에서 모두 위와같은 오류가 발생했다.

 

해결

처음에는 절대경로를 제대로 설정하지 못한 이유인가 생각하고 다른 파일들처럼 @/rabbit.git, @/public/rabbit.gif 와같이 수정해봤지만 여전히 제대로 인식하지 못했다.

구글링해보니 위 오류가 포함된 게시글은 모두 파일명 변경 후 github에서 대소문자 구분을 변경사항으로 포함하지 않아 생긴 문제라고해 해결 과정을 따라해봤다.

 

관련 vercel 문서

git config core.ignorecase false
git rm -r --cached .
git add .
git commit -m "commit message"
git push