Next.js App Router で page.tsx を置いても 404 が解消できない

要約

App Router で 404 になるときは 「ファイル名」「配置ディレクトリ」「default export」 の 3 点を順に確認する。
多くは page.tsx の名前間違いか、Pages Router と混同して pages/ に置いているケースで片付く。

よくある原因

1. ファイル名違い: index.tsx / route.tsx などにしている。
   Pages Router の index.tsx 慣習を引きずっている
2. pages/ に置いている: App Router は app/ 配下が前提。pages/ 配下のファイルは別ルーター扱い
3. default export 忘れ: 名前付き export だけでは Page として認識されない
4. not-found.tsx の影響: 親ルートに not-found.tsx を置くと、子の 404 もそこに委譲される
5. キャッシュ: .next の古い情報が残ってルート追加が認識されていない

解決策

1. ファイル名と配置を確認する

公式の page.js ファイル規約 のとおり、ルートディレクトリは app/、ファイル名は page.tsx。

app/
  page.tsx                  -> /
  about/page.tsx            -> /about
  blog/[slug]/page.tsx      -> /blog/:slug

2. default export を書く

export default function Page() {
  return <h1>Hello</h1>;
}

名前付き export だけでは認識されない点に注意する。

3. キャッシュをクリアする

rm -rf .next
npm run dev

それでも 404 が続く場合は、公式のルーティングガイド で layout.tsx / route.tsx / not-found.tsx などの規約と影響範囲を確認する。