Next.js App Router 사용 시 컴포넌트 폴더/파일 네이밍 규칙에 대한 고민

[Eunkyung-Son]

Next.js App Router를 사용할 때,
컴포넌트 폴더와 파일 이름을 케밥 케이스(kebab-case)로 할지, 파스칼 케이스(PascalCase)로 할지에 대해 의견을 나누고 싶습니다.

• 케밥 케이스 (kebab-case)

components/
  my-component/
    my-component.tsx

1. 폴더와 파일 이름 모두 kebab-case.
2. Next.js 기본 폴더 규칙과 어울림.
3. 최근 퍼블리시된 여러 third-party UI 라이브러리(ex: shadcn/ui 등)에서도 케밥 케이스를 기본 구조로 채택하는 추세.

• 파스칼 케이스 (PascalCase)

components/
  MyComponent/
    MyComponent.tsx

1. 폴더와 파일 이름 모두 PascalCase.
2. 컴포넌트 단위가 명확히 구분되어 가독성 좋음.
3. 컴포넌트 import/export 시 이름 통일성 유지.

---

App Router 구조상 라우트 폴더는 케밥 케이스가 기본인데, 컴포넌트 폴더까지 케밥으로 맞추는 게 좋을까요?
아니면, 컴포넌트처럼 기능적인 단위는 파스칼 케이스로 분리해서 가독성과 구분성을 높이는 게 좋을까요?
여러분은 어떤 방식을 선호하시나요?
더 좋은 방안이 있으면 자유롭게 의견 주시면 감사하겠습니다.

[heecheon92]

.tsx는 파스칼 .ts는 케밥은 안될까요? ㅎㅎ

[chan3785]

저는 components/ 하위에 페이지 별 폴더 (케밥 케이스) 그리고 컴포넌트 파일 이름은 파스칼 케이스를 선호해요.
예를 들면 components/login/Login.tsx, LoginModal.tsx 이렇게 사용하고 있어용