コンテンツにスキップ

src ディレクトリ

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

これにより、アプリケーションコードと、ほとんどの場合プロジェクトのルートに配置されるプロジェクト設定ファイルが分離され、一部の個人やチームにとって好ましい方法となります。

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

An example folder structure with the `src` folder

知っておくと良いこと:

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