【Next.js】「src/pages」の画面が表示されない

今回は、「Next.js」のディレクトリ構成を「pages」から「src/pages」のように変更したときに画面が表示されない問題の原因と解決方法を紹介していきます。

検証環境

検証に使用した環境／ライブラリを次に記載します。

ルートディレクトリに「pages」ディレクトリが存在する場合は、「src/pages」が存在していても無視される動作になります。正しく動作しないディレクトリ構成例は、次のようになります。

.
|--pages
|--src
|  |--pages
|  |  |--_app.tsx
|  |  |--index.tsx

ルートディレクトリの「pages」を削除します。正しく動作するディレクトリ構成例は、次のようになります。

.
|--src
|  |--pages
|  |  |--_app.tsx
|  |  |--index.tsx

削除しても表示されない場合は、ファイル・ディレクトリを確認するコマンド（dirコマンド、lsコマンドなど）やエクスプローラーなどを使用して、ディレクトリが削除されていることを確認してみてください。

「Next.js」でディレクトリ構成を「src/pages」に変更して画面が表示されないときの原因と解決方法を紹介しました。

「Next.js」の公式サイトにディレクトリ構成について記載があります。解決しない場合などは参考にしてください。