Next JS를 공부하던 중에 아래와 같은 에러가 발생하였습니다.
The default export is not a React Component in page: "/"
[디렉토리 구조]
[에러 원인]
index.ts 파일에 아래와 같이 코드를 입력하고 실행해서 확인하니 The default export is not a React Component in page: "/" 에러가 발생하였습니다. 에러를 읽어보면 default export가 React Component가 아니라고 합니다. Next JS에서는 default로 export하지 않는다면 사이트에 접속했을 때 에러가 발생하게 되어있습니다. 따라서 default export를 하지 않아 발생한 에러입니다.
export function Home() {
return "hi";
}
[해결 방법]
pages폴더에서 export default를 해주면 됩니다. Next Js에서는 함수의 이름은 중요하지 않고, 중요한 것은 함수가 default로 export 되는 것과 파일명입니다.
export default function Home() {
return "hi";
}
[실행 결과]
