Next.js를 Netlfiy에 배포하는 과정 중에 발생한 에러 및 해결 방법을 기재한다.
1. ESLint
ESLint: Cannot serialize key "parse" in parser: Function values are not supported.
번역 > 에러는 ESLint 설정에서 함수 값이 직렬화되지 않아서 발생한 오류입니다.
해결
next.config.js 파일을 수정하여 ESLint 체크를 건너뛰도록 할 수 있습니다. 이 설정은 배포 환경에서만 사용되며 로컬에서는 여전히 ESLint 체크를 할 수 있습니다.
// next.config.js
module.exports = {
eslint: {
ignoreDuringBuilds: true, // 빌드 중 ESLint 오류 무시
},
};2. React Component
Build optimization failed: found page without a React Component as default export in pages/...
번역 > 빌드 최적화에 실패했습니다. 기본 내보내기에 React 구성 요소가 없는 페이지가 발견되었습니다.
해결
pages 폴더에 React 컴포넌트 외 다른 파일이 존재해서 발생한 문제.
나는 duration.js 파일을 utils 폴더로 이동함.
3. prerendering 문제 ("/" 페이지 관련)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading '0')
- TypeError: Cannot read properties of undefined (reading '0')
Next.js의 getStaticProps나 getServerSideProps에서 데이터가 제대로 전달되지 않아 발생할 수 있습니다. 예를 들어, API 호출이나 데이터 로딩 시 undefined를 반환하고 이를 처리하지 않으면 이런 오류가 발생할 수 있습니다.
해결
getStaticProps나 getServerSideProps에서 데이터의 응답값이 undefined가 반환되는 경우, 예외처리를 진행
export async function getStaticProps() {
const data = await fetchData();
if (!data) {
return { notFound: true }; // 데이터가 없을 경우 페이지를 "찾을 수 없음"으로 처리
}
return {
props: { data }, // 데이터가 있을 경우 props로 전달
};
}4. Netlify 환경변수
배포는 완료되었으나, api 호출하는 부분에서 데이터가 나오지 않는 경우가 있었다.
이유는 .env 환경변수가 netlify 환경에는 설정되어 있지 않았기 때문인데,
해당 부분을 배포 환경에서도 동일하게 적용을 해야한다.
적용 방법
Netlify 대시보드 > Site configuration > Environment variables > Add a variable > import from a .env file
로컬의 .env 환경변수를 그대로 적어준다.
