src ディレクトリ

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

この方法では、主にプロジェクトルートにある設定ファイルからアプリケーションコードを分離でき、個人やチームによって好まれる場合があります。

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

`src` ディレクトリを使用したフォルダ構造の例

知っておくと便利

  • /public ディレクトリはプロジェクトルートに残しておく必要があります
  • package.jsonnext.config.jstsconfig.json などの設定ファイルはプロジェクトルートに残す必要があります
  • .env.* ファイルはプロジェクトルートに残す必要があります
  • src/app または src/pages は、ルートディレクトリに app または pages が存在する場合無視されます
  • src を使用する場合、/components/lib などの他のアプリケーションフォルダも移動するのが一般的です
  • Tailwind CSSを使用している場合、contentセクションtailwind.config.js ファイルに /src プレフィックスを追加する必要があります