srcフォルダ

Next.jsの特別なディレクトリである apppages をプロジェクトのルートに配置する代わりに、アプリケーションコードを src フォルダ以下に配置する一般的なパターンもサポートしています。

これにより、アプリケーションコードとプロジェクト設定ファイル(主にプロジェクトルートに存在する)を分離でき、個人やチームによって好まれる構成になります。

src フォルダを使用するには、app Routerフォルダまたは pages Routerフォルダをそれぞれ src/app または src/pages に移動します。

`src` フォルダを使用したフォルダ構成の例

知っておくと便利:

  • /public ディレクトリはプロジェクトのルートに残しておく必要があります
  • package.jsonnext.config.jstsconfig.json などの設定ファイルはプロジェクトのルートに残す必要があります
  • .env.* ファイルはプロジェクトのルートに残す必要があります
  • ルートディレクトリに app または pages が存在する場合、src/app または src/pages は無視されます
  • src を使用する場合、/components/lib などの他のアプリケーションフォルダも移動する可能性が高いです
  • ミドルウェアを使用している場合は、src フォルダ内に配置してください
  • Tailwind CSSを使用している場合、contentセクションtailwind.config.js ファイルに /src プレフィックスを追加する必要があります
  • @/* などのTypeScriptパスを使用してインポートしている場合、tsconfig.jsonpaths オブジェクトを更新して src/ を含める必要があります