The default export is not a React Component 오류 해결

KUKJIN LEE • 5개월 전 작성

Next.js 프로젝트를 개발하다 보면 종종 마주치는 오류 중 하나가 "The default export is not a React Component in page: [페이지 경로]" 입니다.

대부분 경로가 잘못됐기에 발생하는 오류가 경로 문제가 아니라면 간단하게 해결할 수 있습니다.

오류의 주요 원인

가장 흔한 원인은 컴포넌트를 default export로 내보내지 않은 것입니다. 다음과 같이 수정해보세요.

// Before
export const MyComponent = () => {
  // ...
}

// After
export default function MyComponent() {
  // ...
}

파일 확장자 확인 해보셨나요?

export하는 것이 실제로 React 컴포넌트인지 확인하세요. 컴포넌트는 JSX를 반환하는 함수여야 합니다.

export default function MyComponent() {
  return <div>Hello, World!</div>;
}

대부분은 파일 이름과 경로 확인 문제입니다. Next.js는 파일 시스템 기반 라우팅을 사용합니다. 파일 이름과 경로가 올바른지 확인하세요:

파일 이름이 경로와 일치하는지 확인하세요.