ファイル名をindexにするとディレクトリ構成が綺麗になる話

# Good
components/
  button/
    index.tsx
    index.test.tsx
    index.stories.tsx

# Bad
components/
  button/
    button.tsx
    button.test.tsx
    button.stories.tsx

# Bad
components/
    button.tsx
    button.test.tsx
    button.stories.tsx

// Bad
import { Button } from '@/components/button/button';

// Good
import { Button } from '@/components/button';

├── __tests__ # テストファイルのセットアップ用
├── e2e # e2eテスト
├── public # 静的ファイル
├── src
│   ├── app
│   │   ├── (apps) # ルーティング
│   │   │   ├── _features # ページでしか使わないコンポーネント
│   │   │   │   └── hoge
│   │   │   │       ├── api # データ取得のファイル
│   │   │   │       ├── components # コンポーネント (index.tsx)が配置されている。
│   │   │   │       ├── mocks # APIのモックデータ
│   │   │   │       └── utils # ユーティリティ
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx # トップページ
│   │   ├── layout.module.scss # レイアウト用のスタイル
│   │   └── layout.tsx #グローバルレイアウト
│   ├── components # 共通コンポーネント (ui配下以外はスタイルを持つことができる)
│   │   ├── checkbox
│   │   │   ├── index.stories.tsx
│   │   │   ├── index.test.tsx
│   │   │   └── index.tsx
│   │   ├── loader
│   │   │   ├── index.stories.tsx
│   │   │   ├── index.test.tsx
│   │   │   └── index.tsx
│   ├── layouts #グローバルやページごとのレイアウト
│   │   ├── header
│   │   │   ├── index.stories.tsx
│   │   │   └── index.tsx
│   │   ├── index.module.scss
│   │   ├── index.stories.tsx
│   │   └── index.tsx
│   ├── libs # ライブラリや独自のユーティリティを配置
│   │   ├── errors # カスタムのエラーを配置 エラーはここのファイルを使用してエラーを生成する。
│   │   │   ├── index.test.ts
│   │   │   └── index.ts
│   │   └── types # 共通の型を配置
│   │       ├── api
│   │       │   └── hoge
│   │       │       └── index.ts
│   │       └── next # Next.jsの型
│   │           └── index.ts
│   └── tests # vitestに関連しないテストの設定ファイル
└──       └── index.ts