pages 폴더를 사용할 때 주의 사항

📍에러

에디터에서는 에러가 없었는데, 배포하려고 하니 vercel 에서 에러를 띄웠다

 

에러 메시지

found page without a react component as default export in pages/index.styled.ts

 

styled-copmonents 를 쓰고 있는데, pages 폴더에 있는 index.tsx를 스타일링 하기 위해 index.styled.ts를 만든 것이 화근이었다

 

📍pages 폴더 주의사항

⭐Next.js 프로젝트에서 pages 폴더는 routing 공간이므로, 각각의 파일이 page가 된다

따라서 index.styled.ts 파일이 존재하면 안된다!

 

디폴트 페이지 확장자 : .tsx, .ts, .jsx, .js 이며 next.config.js 에서 추가 가능

module.exports = {
  pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts'],
}

 

📍non-page 파일을 pages 디렉토리에 포함시키려면..

예를 들어, page 확장자를 index.page.tsx 처럼 바꾸려면..

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

 

이렇게 하면 pages 내에 다른 non-pages 파일들이 존재할 수 있다!

 

📍참고

 

https://stackoverflow.com/questions/65598753/cant-build-react-next-project-found-page-without-a-react-component-as-default

Can't build React/Next project - found page without a React Component as default export (context api file)

 

https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory

next.config.js: Custom Page Extensions | Next.js