Next.js에서 페이지 별로 컴포넌트를 관리할 때 문제점

문제 발생

Next.js의 페이지 라우터를 쓰고 있었고, 지금껏 개발할 때는 아무 문제가 없었다.

하지만 배포를 시작하면서 빌드를 해보니 그동안 없었던 문제가 생기기 시작했다.

에러 메시지는 아래와 같았다.

// 에러 메시지
Build optimization failed: found pages without a React Component as default export in
pages/my-shop/register/components/Input/types/types.ts
pages/signin/types/types.ts
pages/signup/types/types.ts
pages/home/hooks/userRequest.ts
pages/home/hooks/useUserQuery.ts

문제 해결

결론부터 말하자면 pages 폴더 내에 리액트 컴포넌트 이외의 파일을 만들어서 생긴 문제였다.

팀 프로젝트에서 폴더 구조 및 네이밍 컨벤션을 정할 때 아래처럼 네이밍 하기로 했다.

// 컴포넌트
/pages/{페이지 이름}/components/{컴포넌트 이름}/index.tsx  

// 타입
/pages/{페이지 이름}/types/types.ts    

 

Next.js에서는 pages 폴더 내의 파일을 페이지 컴포넌트로 읽는다.

따라서 타입 파일도 페이지 컴포넌트로 읽는데, 리액트 컴포넌트가 아니기 때문에 발생한 문제였다.

그래서 페이지 컴포넌트라는걸 명시해주기 위해 아래와 같은 설정을 추가해주고 페이지 파일의 이름을 변경했다.

// 페이지 파일 이름 변경
index.tsx -> index.page.tsx

next.config.js

const nextConfig = {
  ...
  pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
  ...
}
module.exports = nextConfig;