[FE] Next.js - export default vs export

export default가 아닌 export로 페이지 컴포넌트를 내보내면 발생하는 오류

 

Next.js로 작업 시 한 번쯤 왜?라는 의문이 생기는 부분이라 생각하여 정리하기로 했다.

 

오늘 주제와 관련하여 에피소드 하나가 있어 간략히 소개하고 시작하려고 한다.

※ 하기 에피소드는 Next.js 없이 React만 사용하여 개발할 때의 이야기이다.

작업하실 때 export default 쓰지 마세요.
   - Senior 개발자님

 

이유는 명확했다.

1. 나의 코드에서 export와 export default의 정확한 차이점을 모르고 쓰는 것이 보임
2. 1의 이유에 따라 export default를 사용함으로써 생길 수 있는 네이밍 오류 예방하기 위함

첫 회사에서 받은 피드백은 꽤 큰 영향을 끼쳐 export default 혐오(?)증 까지 생겼었다.

그런데.

Next를 공부하니까 export default를 안쓰면 오류가 발생하네?

그냥 넘어갈 수 있는 문제가 아니었다.그래서 조금 찾아봤다.

 

export default vs export(named export)

비교 항목	export default	export(named export)
내보낼 수 있는 개수	파일당 1개	여러 개 가능
가져올 때 이름	아무거나 가능	반드시 같은 이름
import 방식	import 아무이름 from './src'	import { 정해준 이름 } from './src'
example	export default function A() {}	export function B() {}
Next.js 라우팅 컴포넌트 필수 여부	✅필수	❌ 그 외 추가적인 컴포넌트 or 함수에 사용

 

왜 필수일까

1. Framework에서 정한 규칙이니까
2. Next.js 는 파일 시스템 기반 라우팅을 사용하기 때문이니까 - Next.js 공식문서

 

그럼 내부 규칙이 어떻게 구성되어있길래 그럴까?

무지성으로 Next.js github 가서 .default를 검색해보았다

 

코드를 다 보진 않고 이해가 되지는 않았지만 대충 이렇지 않을까 하는 생각을 해봤다

const PageComponent = await import("../pages/about.tsx");
const Page = PageComponent.default; // 👈 여기서 default export된 컴포넌트를 찾음

return <Page />

 

이렇게 되어있다면.. export default한 페이지 컴포넌트가 해당 경로에 없다면 오류가 발생하지 않을까?

모든 것을 알려주는 ChatGPT에게 물어보았다

기분이 좋을지도..?

결론

1. Next.js의 file-system based routing은 pages 폴더 내부 파일을 자동으로 URL과 연결 작업함
2. 각 파일을 import() 하여 export default된 컴포넌트를 찾음 => 없으면 라우팅 오류 남( 맨 위 이미지 )
3. 각 페이지 파일은 반드시 export default로 내보내야 함