できない.dev

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

App Router のルーティングはファイル名が page.tsx、配置が app/ 配下、default export の 3 条件で成立する。
404 の典型原因は page.tsx 以外の名前や pages/ への置き間違いで、named export だけの page は 404 ではなく 500・ビルド失敗になる。

#nextjs #app-router #not-found #routing #page

公開: 更新:

実行例あり（2026-09-21 に実環境で検証）

要約

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

実行例

node:20 コンテナで Next.js 15.5.25 を使って試すと、app/about/index.js のままではビルドのルート一覧に /about が現れず（pages/contact.js は Route (pages) 側に /contact として別枠で出る）、page.js に改名すると /about が App Router のルートとして生成される。
名前付き export だけにした page.js では /about のプリレンダリングでエラーになってビルドが終了コード 1 で止まり、export default に戻すと再び通る。

$ find app pages -name "*.js"
app/page.js
app/about/index.js
app/layout.js
pages/contact.js
$ npx next build
▲ Next.js 15.5.25
 
   Creating an optimized production build ...
 ✓ Compiled successfully in 2.0s
   Linting and checking validity of types ...
   Collecting page data ...
   Generating static pages (0/5) ...
   Generating static pages (1/5) 
   Generating static pages (2/5) 
   Generating static pages (3/5) 
 ✓ Generating static pages (5/5)
   Finalizing page optimization ...
   Collecting build traces ...
 
Route (app)                                  Size  First Load JS
┌ ○ /                                       127 B         103 kB
└ ○ /_not-found                             996 B         103 kB
+ First Load JS shared by all              102 kB
  ├ chunks/255-37e0f0325134c4d7.js        46.4 kB
  ├ chunks/4bd1b696-c023c6e3521b1417.js   54.2 kB
  └ other shared chunks (total)           1.88 kB
 
Route (pages)                                Size  First Load JS
─ ○ /contact                                259 B         108 kB
+ First Load JS shared by all              108 kB
  ├ chunks/framework-4891de286d38ef96.js  68.7 kB
  ├ chunks/main-1ff5161f6d4ee16d.js         37 kB
  └ other shared chunks (total)           1.84 kB
 
○  (Static)  prerendered as static content
$ echo $?
0
$ find app -name "*.js"
app/page.js
app/about/page.js
app/layout.js
$ npx next build
▲ Next.js 15.5.25
 
   Creating an optimized production build ...
 ✓ Compiled successfully in 2.1s
   Linting and checking validity of types ...
   Collecting page data ...
   Generating static pages (0/6) ...
   Generating static pages (1/6) 
   Generating static pages (2/6) 
   Generating static pages (4/6) 
 ✓ Generating static pages (6/6)
   Finalizing page optimization ...
   Collecting build traces ...
 
Route (app)                                  Size  First Load JS
┌ ○ /                                       131 B         103 kB
├ ○ /_not-found                             996 B         103 kB
└ ○ /about                                  131 B         103 kB
+ First Load JS shared by all              102 kB
  ├ chunks/255-37e0f0325134c4d7.js        46.4 kB
  ├ chunks/4bd1b696-c023c6e3521b1417.js   54.2 kB
  └ other shared chunks (total)           1.88 kB
 
Route (pages)                                Size  First Load JS
─ ○ /contact                                259 B         108 kB
+ First Load JS shared by all              108 kB
  ├ chunks/framework-4891de286d38ef96.js  68.7 kB
  ├ chunks/main-1ff5161f6d4ee16d.js         37 kB
  └ other shared chunks (total)           1.84 kB
 
○  (Static)  prerendered as static content
$ echo $?
0
$ npx next build
▲ Next.js 15.5.25
 
   Creating an optimized production build ...
 ✓ Compiled successfully in 2.1s
   Linting and checking validity of types ...
   Collecting page data ...
   Generating static pages (0/6) ...
Error occurred prerendering page "/about". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.Module
    at stringify (<anonymous>) {
  digest: '85934658'
}
Export encountered an error on /about/page: /about, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null
$ echo $?
1

— 2026-09-21 時点の出力

検証環境

検証日
実行環境
node:20 Debian GNU/Linux 12 (bookworm)
バージョン
  • Node.js 20.20.2
  • npm 10.8.2
  • Python 3.11.2
  • Git 2.39.5

この記事の「実行例」は、上記の環境で実際にコマンドを実行して得られた出力をそのまま掲載しています。 再現手順はリポジトリの検証スクリプトとして管理し、定期的に再実行して出力を更新しています。

よくある原因

  1. ファイル名違い: index.tsx / route.tsx などにしている。
    Pages Router の index.tsx 慣習を引きずっている
  2. pages/ に置いている: App Router は app/ 配下が前提。pages/ 配下のファイルは別ルーター扱い
  3. default export 忘れ: 名前付き export だけでは Page として認識されない。
    ただし症状は 404 ではなく、next dev ではそのルートが 500、next build では The default export is not a React Component in "/about/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 だけでは認識されない点に注意する。
この場合は 404 ではなく The default export is not a React Component というエラーになるので、404 の切り分けとは別に扱う。

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

rm -rf .next
npm run dev

それでも 404 が続く場合は、公式のプロジェクト構成ガイド（新しいタブで開く） で layout.tsx / route.tsx / not-found.tsx などの規約と影響範囲を確認する。

この記事は役立ちましたか？