NEXT.JS를 사용해서 개발을 진행하고 성능 확인을 위해서 Lighthouse 검사를 돌렸는데 별거 안했는데 성능이 좋아서 개발 실력이 좋아졌다고 생각했는데 어림도 없었다. 자세히 보이 오류로 인해 결과가 불완전한 것이었다. Lighthouse 실행에 영향을 미치는 문제가 발생했습니다. 라는 오류가 나왔다. 특정 컴포넌트가 너무 커서 그런가 싶어서 컴포넌트를 지워도 보고 Dynamic Import 으로 인해서 검사 중 컴포넌트가 렌더링되서 발생한 문제인지 Static Import로 변경도 해봤는데 여전히 오류가 발생했다. 원인을 찾기 위해서 현재 페이지를 다시 한번 검토를 해보는데 특이한 부분이 있었다. 상세 페이지 흔하게 사용하는 Link 컴포넌트이다. 하지만 다른 점이 바로 현재 라우팅에서 deta..

Next.js 프로젝트를 배포하기 위해서 build 중 오류가 발생했다. 'Build optimization failed: found page without a React Component as default export in pages/...' error 해석해보면 React 컴포넌트가 아닌 것을 export 하는 페이지는 렌더링 될 때 오류를 일으키거나 빌드 성능을 저하시킬 수 있다고 한다. 한마디로 pages 폴더 안에 React 컴포넌트 외 다른 파일이 존재하기 때문에 발생한 문제였다. 나같은 경우 styled-components를 사용한 코드를 모아두는 Style.js 파일이 있어서 발생한 문제였다. 해결 방법 간단하게 Style.js 파일을 외부로 이전시켜주는 것으로 해결했다. 앞으로는 pag..

Next.js에서 styled-components를 같이 사용할 때 오류가 발생했다. 찾아보니 styled-components를 사용했을 때의 className과 실제 적용되었을 때의 className이 달라서 발생하는 문제였다. 최초 실행 시에는 css가 제대로 적용이 되었는데, 페이지 이동 & 새로고침이 발생했을 때 위와 같은 오류가 나오면서 css가 적용이 되지 않았다. 찾아보니 next.js에서 초기 렌더링은 ssr로 적용되고, 이후 페이지 이동 등은 csr로 렌더링이 된다. 초기 렌더링 시에는 ssr로 적용되기 때문에 문제가 없었지만 이후 csr로 적용되기 때문에 클래스 명이 맞지 않아서 발생한 것 같다. 해결 방법 구글에 검색 했을 때 기본적으로 해결하는 방법이 있었다. .babelrc에서 설..