Next.js 공식문서 튜토리얼을 마치고 본격적으로(?) 사용해보기 위해서 프로젝트를 시작했다.
새 컴포넌트를 만들던 중에 갑자기 머릿속에서 스친 질문이 있었다.
Next.js 에서 제시하는 파일명 컨벤션이 있을까?
이전에 리액트만 사용했을 때는 디렉토리 내 파일명을 PascalCase 로 지었는데, Next.js의 공식문서 튜토리얼에서는 모든 파일명이 소문자로 시작했다.
궁금해서 구글링해보니, 한글로 검색했을 때와 영어로 검색했을 때의 결과는 사뭇 달랐다.
- 한글로 검색했을 때는,
pages/디렉토리 내 파일들을 제외하고 파일명과 컴포넌트 명 둘 다PascalCase로 해야 한다는 결과들이 많았다.
- 반면에 영어로 검색했을 때는, 파일명을
kebab-case로 한다는 의견들이 많았다.
https://www.reddit.com/r/nextjs/comments/u6uskc/file_naming_convention_for_layout_components/
공식문서 튜토리얼과 Next.js 공식 레포지토리에서는 폴더명은 kebab-case가 사용되었지만, 파일명은 PascalCase와 kebab-case가 혼용되어 사용되고 있었다.
https://github.com/vercel/next.js/tree/canary/examples/amp-first/components/amp
https://github.com/vercel/next.js/tree/canary/examples/nested-components/components
그래서 내가 생각한 결론은..
React는 기본적으로 unopinionated 한 라이브러리이다.
따라서 폴더명이나 파일명을 어떻게 하라는 구체적인 규칙이 없다.
다만 많은 개발자들이 airbnb의 컨벤션을 따르고 있기도 하고, 결국
컨벤션이라는 것은 많은 사람들과 함께 협업을 하기 위한약속이니까 조직 내에서 컨벤션을 잘 정하고, 그것을 잘 지키면 되는 것 같다.
Next.js 공식문서에서도 폴더명 또는 파일명에 대한 규칙을 찾지 못했다. 공식 레포지토리에서도 혼용되어 사용되기도 한 것으로 봐서 규칙이 없는 것 같다.
팀 내에서의 약속인 컨벤션을 잘 지키자!
(지금 하는 프로젝트는 혼자하는 것이라 일관성 있게만 쓰는 것으로 정했다.)
