Next.js 13以降のApp Routerで導入された「プライベートフォルダ」機能について、わかりやすく解説します。

プライベートフォルダとは？

フォルダ名の先頭にアンダースコア（_）をつけることで、そのフォルダを「プライベート」として扱うことができる機能です。

プライベートフォルダの基本概念 フォルダ名の先頭に _ をつけることで、そのフォルダはルーティング対象外になります 通常フォルダ components/ /components にアクセス可能 プライベートフォルダ _components/ URLとしてアクセス不可

主な特徴

  1. ルーティング対象外
    • _で始まるフォルダとその中身は、URLとしてアクセスできません
    • 内部実装用のコードを安全に配置できます
  2. チーム開発での利点
    • フォルダの用途が一目で分かります
    • 「これは内部実装用」という意図が明確になります

具体例で理解する

通常のフォルダ構造の場合

app/
  ├── components/     # /components としてアクセス可能
  │   └── Button.tsx
  └── page.tsx

プライベートフォルダを使用した場合

app/
  ├── components/     # /components としてアクセス可能
  │   └── Button.tsx
  └── page.tsx
フォルダ構造の詳細 app/ ├── page.tsx ├── layout.tsx ├── _components/ # ルーティング対象外 ├── Button.tsx ├── Header.tsx └── Footer.tsx └── about/ # 通常のルーティング └── page.tsx ※ _components以下のファイルは内部実装として使用可能

プライベートフォルダの活用シーン

  1. 共通コンポーネントの管理
    • UIコンポーネント
    • ユーティリティ関数
    • カスタムフック
  2. 内部実装の整理
    • データベース接続処理
    • API関連のヘルパー関数
    • 定数や型定義
  3. テストやドキュメントの配置
    • テストファイル
    • 内部ドキュメント
    • 設定ファイル
プライベートフォルダの活用シーン 共通コンポーネント _components/ ・Button.tsx ・Header.tsx ・Modal.tsx 内部実装 _lib/ ・database.ts ・api-helpers.ts ・utils.ts テスト/設定 _tests/ ・setup.ts ・helpers.test.ts ・mocks.ts それぞれの用途に応じて適切なプライベートフォルダを作成できます ※ フォルダ名は例示です。プロジェクトの要件に応じて自由に設定可能

まとめ

プライベートフォルダ機能は、Next.jsプロジェクトのコード整理を助ける便利な機能です。フォルダ名の先頭に_をつけるだけの簡単な仕組みですが、以下のような大きなメリットがあります：

  • 実装の意図が明確になる
  • URLとしてアクセスされる心配がない
  • プロジェクトの構造が整理しやすくなる

この機能を活用することで、より管理しやすく、安全なNext.jsプロジェクトを構築することができます。

参考サイト

https://nextjs.org/docs/app/getting-started/project-structure#private-folders