Next.js에서 npm run build 시 생겼던 에러

• 프로젝트를 배포하기 위해 npm run build를 실행했을 때 처음 보는 에러가 발생했고, 이를 해결하기 위해 2일 동안 구글링과 코드를 다시 읽어보는 등의 노력을 했다.

• 에러 로그를 통해 문제가 발생한 부분을 찾아내어, 팔로우 추천 목록을 보여주는 컴포넌트의 fetch 부분을 분리하여 문제를 해결하였다.

• Next.js에서 페이지 렌더링과 데이터 페칭은 서로 다른 동작 방식을 가지며, 이를 제대로 활용하지 않으면 에러가 발생할 수 있다. SSR(Server Side Rendering) 또는 SSG(Static Site Generation) 시에 데이터를 가져오는 방법으로는 getServerSideProps 또는 getStaticProps를 사용한다.

• 데이터 페칭을 컴포넌트 내부에서 직접 비동기 함수로 처리하면 문제가 발생할 수 있으므로, 이를 분리하는 것이 좋다. 또한, Next.js의 getServerSideProps 또는 getStaticProps를 사용하여 페이지의 데이터 요구사항을 처리하면, 서버 사이드에서 데이터를 미리 가져와 페이지가 렌더링될 때 이미 필요한 데이터가 준비되어 있을 것이다.