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

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

 

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

 

오류의 주요 원인

1. 컴포넌트를 default export로 내보내지 않은 경우

2. 컴포넌트가 아닌 것을 export한 경우

3. 파일 경로가 잘못된 경우

 

해결 방법

1. default export 확인하기

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

 

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

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

 

2. 컴포넌트 형식 확인하기

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

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

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

 

3. 파일 경로와 이름 확인하기

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

• Pages Router: /pages/your-route.js

• App Router (Next.js 13+): /app/your-route/page.js

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