Menu

src フォルダ

プロジェクトのルートに特別な Next.js の app または pages ディレクトリを配置する代わりに、Next.js は 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 などの他のアプリケーションフォルダも移動することになります。
  • Middleware を使用している場合は、src フォルダ内に配置してください。
  • Tailwind CSS を使用している場合は、tailwind.config.js ファイルの content セクション/src プレフィックスを追加する必要があります。
  • インポート時に @/* などの TypeScript パスを使用している場合は、tsconfig.jsonpaths オブジェクトに src/ を含めるように更新する必要があります。