技術ブログをApp Router から Pages Router に移行した話
2025-11-29
Next.js で Markdown ベースのブログを作り、
Google Cloud Storage に静的ホスティングする構成を作りました。
当初は App Router（app/） を使っていましたが、
結果的に Pages Router（pages/）に移行することになりました。
この記事では、
「なぜ App Router をやめて Pages Router にしたのか？」
「何が問題で、どう解決したのか？」
をまとめます。
1. Next.js + Markdown で静的ブログ構築
App Router と Pages Router の違いと、今回 Pages Router に移行した理由
Next.js で静的ブログを作る際、仕組みとしてはシンプルで、
- Markdown (
.md) を読み込む - FrontMatter（title/date/tags）を解析
- 静的 HTML を生成 (
output: export) - GCS にアップロードして公開
という流れです。
しかし、App Router（app/） を使っていた時に、以下の問題が実際に発生しました。
■ App Router と Pages Router の違い
| 項目 | App Router | Pages Router |
|---|---|---|
| 導入 | Next.js 13〜 の新方式 | 従来の方式 |
| データ取得 | Server Components / fetch | getStaticProps が安定 |
| 静的エクスポート | クセあり | 非常に安定 |
fs 利用 |
環境により不安定 | 普通に使える |
| 相対リンクの扱い | 壊れやすい | そのまま出力される |
🚫 1. fs が安定しない（Markdown 読み込み問題）
App Router は Server Components が基本のため、
dev と export で挙動が異なり、Markdown が読めない場面が発生しました。
🚫 2. 相対パスリンクが壊れる（タグページ・記事ページ）
posts/xxx.html や tags/yyy.html にしたかったが、
App Router は URL の扱いが特殊でリンクが正しく生成されませんでした。
Pages Router に移行すると 相対パスがそのまま出るため安定 しました。
🚫 3. output: "export" との相性問題
Next.js 14 で next export 廃止後、
App Router は静的エクスポートと相性が悪く、SSR/RSC が混在しエラーが出やすい。
Pages Router では完全静的 HTML が安定して生成されました。
■ 結論：静的ブログは Pages Router が最適
- ファイル読み込み（fs）が確実に動く
- 相対リンクが壊れない
- GCS のような静的ホスティングと相性が良い
という理由で Pages Router へ移行したことで全て解決 しました。