Next.js 파일 확장자 사용 가이드라인

Next.js 프로젝트에서 .js와 .jsx 파일 확장자 사용에 관한 글입니다. 결론부터 말씀드리자면 Next.js는 .js와 .jsx 모두를 지원하므로, 어느 쪽을 사용해도 코드 실행에는 직접적인 영향이 없습니다. 그러나 아래 언급 될 이점들을 고려하여 적절한 확장자를 선택하는 것이 좋습니다.

 

권장사항

• JSX를 포함하는 파일: .jsx 확장자 사용

• 순수 JavaScript 파일: .js 확장자 사용

 

.jsx 사용의 이점

1. 코드 가독성 향상: 파일에 React 컴포넌트가 포함되어 있음을 명확히 표시합니다.

2. 개발 도구 지원 개선: IDE와 에디터의 JSX 관련 기능이 자동으로 활성화됩니다.

3. 린터 및 포맷터 설정 최적화: JSX 관련 규칙이 자동으로 적용됩니다.

4. 빌드 최적화 가능성: JSX 관련 최적화가 더 쉽게 적용될 수 있습니다.

5. 팀 컨벤션 유지: 일관성 있는 코드 베이스를 유지할 수 있습니다.

6. 향후 호환성 보장: 파일 확장자 기반 처리에 대비할 수 있습니다.

 

.js 사용 시 잠재적 문제점

1. 파일 내용 파악의 어려움

2. IDE의 JSX 지원 기능 자동 활성화 실패 가능성

3. 린터/포맷터의 JSX 규칙 미적용 가능성

4. 빌드 도구의 JSX 최적화 누락 가능성

5. 팀 컨벤션 불일치

6. 향후 도구/프레임워크 업데이트와의 호환성 문제

 

결론

• JSX를 포함하는 파일에는 .jsx 확장자 사용을 강력히 권장합니다.

• 순수 JavaScript 로직만 포함된 파일에는 .js 확장자를 사용합니다.

• 팀 내에서 일관성 있게 사용하는 것이 가장 중요합니다.

 

추가 고려사항

• 프로젝트의 복잡성과 규모에 따라 파일 확장자 선택 전략을 조정할 수 있습니다.

• 기존 프로젝트에서 확장자를 변경할 경우, 빌드 설정 및 임포트 구문을 함께 수정해야 할 수 있습니다.

• TypeScript를 사용하는 경우, .tsx와 .ts 확장자에도 동일한 원칙을 적용할 수 있습니다.