Next.js 빌드 에러

Next.js 환경에서 개발을 진행하다 빌드시 에러로그만 봐서는 알기 어려운 경우를 만났습니다.

해당 에러는 이전 버전과 비교해보면서 차이점을 파악하여 원인을 알 수 있었는데

원인은 바로 파일의 위치가 원인이 됬습니다.

 

[ Next.js의 룰 ]

Next.js 는 기본적으로 src/pages 경로에 파일들을 넣어 페이지를 관리하게끔되어있는데 pages에

sample.js 또는 sample.ts 화면을 생성해두면 별도의 라우팅 작업없이 로컬주소/sample url로 접근하면

바로 해당 화면으로 접근이 가능한 구조입니다. 

 

이런 구조를 가지고 있기때문에 페이지 내에서 사용되는 컴포넌트 파일이 pages 경로 아래에 포함되게 되면 

실행시에는 문제가 없어보이지만 빌드시에는 에러를 만나게 됩니다.

 

[ 해결방법 ]

해당 문제를 피하기 위해선 pages 경로가 아닌 별도의 디렉토리에서 컴포넌트를 위치시켜 관리하면 됩니다.

이렇게 컴포넌트의 위치를 변경시킨 후 빌드하게 되면 문제없이 잘 수행되는 것을 확인할 수 있었습니다.

 

이번 빌드에러로 프레임워크는 항상 기본적인 룰이 어떤것인지 잘 파악하고

사용하는 것이 중요하다는 것을 알게됬습니다.