src フォルダ
プロジェクトのルートに特別な Next.js の app
または pages
ディレクトリを配置する代わりに、Next.js は src
フォルダ内にアプリケーションコードを配置するという一般的なパターンもサポートしています。
これにより、アプリケーションコードとプロジェクトの設定ファイル(主にプロジェクトのルートに配置される)が分離され、一部の個人やチームには好まれる方法です。
src
フォルダを使用するには、app
Router フォルダまたは pages
Router フォルダを、それぞれ src/app
または src/pages
に移動します。
補足:
/public
ディレクトリはプロジェクトのルートに残しておく必要があります。package.json
、next.config.js
、tsconfig.json
などの設定ファイルはプロジェクトのルートに残しておく必要があります。.env.*
ファイルはプロジェクトのルートに残しておく必要があります。- ルートディレクトリに
app
またはpages
が存在する場合、src/app
またはsrc/pages
は無視されます。src
を使用する場合、通常は/components
や/lib
などの他のアプリケーションフォルダも移動することになります。- Middleware を使用している場合は、
src
フォルダ内に配置してください。- Tailwind CSS を使用している場合は、
tailwind.config.js
ファイルの content セクション に/src
プレフィックスを追加する必要があります。- インポート時に
@/*
などの TypeScript パスを使用している場合は、tsconfig.json
のpaths
オブジェクトにsrc/
を含めるように更新する必要があります。