この書籍紹介を書いている時点(2025年1月)でNext.jsはVersionが15になっていますが、「実践Next.js —— App Routerで進化するWebアプリ開発」を読んだので感想文を書きたいと思います。

自分のNext.jsの経験は、1年前このブログを作る時にNext.jsのApp Routerを使って作ったのですが、挫折してAstroで作り直したという経緯がありリベンジしたいと思い読みました。

読もうとした背景

これからフレームワークにNext.jsを使ったアプリケーションを作りたいと思い、Next.jsへの理解を深めたいので読みました📘

当初はApp Router時代のベストプラクティスなディレクトリ構成が知れるのかなと思ったのですが、この書籍のサンプルアプリケーションは実装比較のためにUIコンポーネント・Web APIサーバー・Webアプリケーション本体の複数のNext.jsプロジェクトに分かれているので、ベストなディレクトリ構成に関しては他で調べてみる必要がありました。

後述しますが、この書籍のサンプルアプリケーションではパフォーマンスを上げるためのキャッシュの挙動の違いの実装比較を紹介しているのでキャッシュの理解を深めることができました。

書籍の内容

Next.jsのPage RouterからApp Routerで何が変わったかに焦点を絞った解説書なので、Next.js自体初心者の人向けではないのですが、各項目について丁寧に解説されているのとサンプルコードもあるので、しっかり手元で動かせばそれほど苦もなく読めるかとは思います。

また、実際にハンズオンで手を動かす形式の本ではないので注意が必要です。

本の構成としては、最初の4章でNext.jsの基礎からServer Component、App Routerの規約、Route Handlerなど新しい機能の紹介がサンプルコードと共に行われています。

5~10章では写真をアップロードするサンプルアプリケーションの中身を見ながらキャッシュ、認証機能、バックエンドとのデータの連携などに関して見ていく構成となっています。

このサンプルアプリケーションで最初は改善の余地があるコードを見ていき、その後はキャッシュの挙動の違いなどの実装比較を行っていくので勉強になりました。

自分は、認証機能、バックエンドとのデータの連携などのコードを書いたことがなかったので、動くアプリケーションを基に各機能のユースケースを学ぶことができて良かったです！

学べたこと

この書籍を読んで学べたことの一覧。

• Next.jsのApp Routerの知識
• App Routerの規約
• dynamic renderingとstatic rendering
• 4種類のキャッシュの挙動の違い
  • Requestのメモ化
  • Dataキャッシュ
  • Full Routeキャッシュ
  • Routerキャッシュ
• 静的Routeにしたつもりが意図せず動的Routeに変わってしまう事例
• 動的Routeになる要因を取り除く方法
• Prisma Clientのようなfetch関数以外でデータを取得する際にRequestのメモ化を適用するようにcatch関数でデータ取得関数をラップする
• unstable_cacheは今後変わりそうなのでしっかりキャッチアップしとく

余談ですがNext.jsでブログを作ろうとした時にヘッドレスCMSのnewtを使ってみたのですが、記事を取得するサンプルコードでcache関数を使っていてなぜ使っているのか分からなかったのですが、この書籍を読んでようやく理解できました。

---

まとめ

「実践Next.js —— App Routerで進化するWebアプリ開発」を読んだので書籍紹介を書いてみました。

公式ドキュメントを読めば同じ内容が書いてありますが、この書籍とサンプルアプリケーションでApp Routerの強みを把握できたのでこれからNext.jsでアプリケーションを作る時に詰まらないかなと思います。

Next.js 15でキャッシュのデフォルトが無効になるなど更新が早く本の内容が古くなるなどの懸念はありますが、App Routerが提供するベースとなる概念まで覆ることはないかと思うので、この本が気になる方は早めに読んでおくことをおすすめします。

まだ自分でNext.jsを使ったアプリケーションを作ったことがないので色々試して知見が溜まったらNext.jsについてブログにも書きたいと思います！

Next.jsに興味がある方はぜひ読んでみてください！