コンテンツにスキップ

src ディレクトリ

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

これにより、アプリケーションコードと、主にプロジェクトのルートにあるプロジェクト設定ファイルが分離され、一部の個人やチームに好まれます。

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

An example folder structure with the `src` directory

知っておくと良いこと:

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