[Next.js] Build optimization failed: found page without a React Component as default export in 'Component.styles.js'

문제 발생

프로젝트 중, 따로 페이지를 나누지 않고 index.js 파일에서 진행하고 있었다.
점점 늘어나는 style에 파일을 분리하고자 pages폴더에 Main 폴더를 만들고
Main.js, Main.styles.js로 나눈 뒤 push하고 빌드한 결과 에러가 났다..

---

에러 문구에 나와 있는 공식 문서를 확인한 결과, 페이지를 구성하는 폴더 안에 페이지가 아닌 파일이 포함되어 있었기 때문에(Main.styles.js) 오류가 난 것이였다.

해결

style을 꼭 분리하고 싶었던 나는 next.config.js에 pageExtensions를 추가하고 pages 디렉토리에 page를 포함하는 모든 파일에 .page를 붙여서 이름을 변경하는 것을 선택했다.

//next.config.js
module.exports = {
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}

솔직히 파일명이 보기 좀 그래서 이게 최선일까 싶었으나 이런 방법도 있구나~ 하고 이번에는 이렇게 해보려고 한다ㅎㅎ

 ┣ 📂pages
 ┃ ┣ 📂Main
 ┃ ┃ ┣ 📜Main.page.js
 ┃ ┃ ┗ 📜Main.styles.js
 ┃ ┣ 📜index.page.js

---

참고
Next.js : Page Without Valid React Component
Next.js : Including non-page files in the pages directory