最近 Next.js の App Router を使い始めた際に、少し混乱したポイントについて整理したのでここに記載します。
疑問点
Next.js のプロジェクトを開発していた時、src/app/componentsディレクトリにコンポーネントを配置し、ブラウザから直接アクセスしようとしたところ、404 エラーが発生しました。
例えば：
-
/src/app/dashboard/page.tsx→http://localhost:3000/dashboardでアクセス可能 -
/src/app/components/Button.tsx→http://localhost:3000/components/Buttonでアクセスしようとしても 404
なぜcomponentsディレクトリ内のコンポーネントにブラウザから直接アクセスできないのか、理解するのに少し時間がかかったので、その理由をまとめました。
App Router のルーティング仕組み
調査した結果、App Router においてブラウザからアクセス可能なルートは以下の条件を満たす必要があることがわかりました：
-
appディレクトリ内のフォルダ構造が URL パスに対応する - そのフォルダ内にpage.js/page.tsxまたはroute.js/route.tsxファイルが存在する
つまり、URL からアクセスするためには、フォルダ名がパスの一部になり、そのフォルダ内にpage.tsxまたはroute.tsxが必要です。
components ディレクトリの役割
componentsというディレクトリ名は、Next.js の規約上特別な意味を持ちません。これは単に開発者間の慣習として、再利用可能な UI コンポーネントを格納するために使われています。
App Router では、以下のような特別なファイル名が予約されています：
-
page.js- ルートにアクセス可能なページコンポーネント -
layout.js- 共通レイアウト -
loading.js- ローディング状態の UI -
error.js- エラー状態の UI -
route.js- API エンドポイント
一方で、componentsディレクトリやその中のファイルはルーティングの対象外です。
コンポーネントへのアクセス方法
コンポーネントの内容を直接 URL でアクセスしたい場合は、そのコンポーネントを使用するページファイルを作成する必要があります。
// src/app/my-button/page.tsx
import Button from "../components/Button";
export default function ButtonPage() {
return (
<div>
<h1>ボタンコンポーネントのデモ</h1>
<Button />
</div>
);
}
このようにすれば、http://localhost:3000/my-buttonからアクセスできるようになります。
まとめ
Next.js の App Router では：
- コンポーネントは他のページやレイアウト内でインポートして使用するもの
- 直接 URL でアクセスする対象ではない
- ブラウザからアクセスするには、そのコンポーネントを表示する専用の
page.tsxファイルが必要
初心者で触りはじめた自分にとって、なんでだろうって混乱してました。
claudeなどの生成AIと対話しながら、その回答をもとに整理しました。