Next.jsのフォルダ名・ファイル名はケバブケース・パスカルケースのどちらを使うべきか考えてみました。

結論: ケバブケースを使う

Next.jsの公式のリポジトリを見ると、フォルダ名もファイル名もケバブケースが使われています。shadcn/uiもケバブケースを使用しています。そのため、ケバブケースを使うことをおすすめします。

❌️ MyComponent.tsx
✅️ my-component.tsx

❌️ MyComponent/index.tsx
✅️ my-conponent/index.tsx

Reactの公式ドキュメントではパスカルケースが使われている

Reactの公式ドキュメントではパスカルケースが使われています。これが混乱の原因かと思います。

AIで生成したコードはファイル名にパスカルケースを使用していることが多い

AIで生成したコードはパスカルケースを使用していることが多いです。ケバブケースを使うように命令する必要があります。

フォルダ名・ファイル名に大文字を使うデメリット

GitHubはフォルダ名・ファイル名の大文字と小文字を区別しません。そのため、Sidebar.tsxをsidebar.tsxに変更しても、変更を検知せず、元の名前のままになります。これがバグの原因になります。これを修正する方法については、下記の記事をご覧ください。

まとめ

Next.jsで作るプロジェクトのフォルダ名・ファイル名はケバブケースに統一しましょう。