書評『実践 Next.js ― App Routerで進化するWebアプリ開発』
先日出版された『実践 Next.js ― App Routerで進化するWebアプリ開発 』について、著者の @takepepe さんより献本頂いた。ありがとうございます！
献本いただいた者の責務として、大変恐縮ではあるが、書評を残させてもらう。
自分とNext.js（App Router）
「実際のところ君はNext.jsとかApp Routerのことは知っとるんか？」という話だが、業務でApp Routerを使ったフロントエンド刷新に関わっているので、それなりには把握しているつもりではいる。ただ、Pages Routerに関してはあんまり触ったことはない。少し趣味や副業で触れたことはあるが、知見がすごいあります！と言えるほどではない。
App RouterそのものはStableになる前（当時はapp dirとか呼ばれてた気がする）から触っていて、その後に追加された機能も全部を触っているわけではないが、一通り情報は追っている。Server Actionとかも使ってて、業務で得た諸々の知見を2023年の末にあったJSConf JPで発表したりもしてる。
//speakerdeck.com/player/32e120aa3fa94fa7bc3cc1e2480d8e07
PRやコミットログについては、業務上でハマったものとか特に影響が大きそうなものとかは見てるし、挙動が謎な部分はコードを追ったりもしてる（微細なものだけど修正PR出したとかもある）。とはいえ、超熱心に全部追ってるとかではないので、そんな激しい自信があるほどでもない。
そんな感じ。というわけで以下書評です。
App Router 学び始めにこれ読めるとか最高か…？
もうこれに尽きる…。
もう気付けば一年以上も仕事でApp Routerと付き合ってるので、今でこそある程度やれてるけど、当初はほんとに理解に苦労した覚えがある。チームメンバーでNext.js公式ドキュメントの輪読会をやったりしながらコツコツ理解を深めていったけど、それでもわからなかった部分はたくさんあるし、メンバー全員「たぶんこういうことであってるような気がする、たぶん…（沈黙）」みたいな会話をしてた覚えがある。 それがもう本書読めば全部日本語で要点抑えて書いてあるんですから、ここから学び始める人が正直羨ましい。
個人的に、特に理解が難しいと思うのは次のような部分。
- Server / Client Components の概念や設計の勘所
- 動的 / 静的レンダリングの切り替わり
- 4種類のキャッシュ周りの挙動
- Server Actionの取り扱い
- revalidate周り
このあたりを一通りバッチリ解説してくれてるのはとても助かると思う。
公式ドキュメントを読んで概念を理解できても、結局のところ一回簡単なコードを書いて動きを見てみないとピンと来ないものが多い。
例を挙げると、App Router ではfetch() の呼び出しの勘所を把握しないと、キャッシュや並列実行などの恩恵を受けられず、知らず知らずのうちにパフォーマンス面での恩恵を得られなくなったりする。そのへんはドキュメントにも書いてある部分もあるが、結局読んだだけだと本質的な理解は浅いままになって、実務でコード書いてるときに踏んだりする（実際踏んじゃって自分もPRとかでよく指摘されてた）。
一方、本書だとハンズオン形式でコードを書きながら動きを見つつ実践的に進められるので、「こういった書き方だとこういう問題が出るんやな…」というのを体感できるのが大きいと思う。あらかじめ擬似地雷を踏めるという感じ。
AppRouterよくわからんわ…という人から見たらほぼ確実に理解に役立つ内容が盛り沢山だと思う。
個人的に嬉しかったとこ
自分で言うのもアレだが、ある程度すでに知見を持ってる人から見たときにどうか？という点から見ると、ちょっと理解が不安だったところの確認に使えたのは嬉しかった。実務だとParallel RoutesやIntercepting Routesなどは使ってないのだが、そのあたりを改めて確認できたのは助かった。
また、公式ドキュメントだとまだ弱いなと思う部分として、Server Action周りやrevalidate周りがあるのだが、そのあたりも手厚く解説されてるのはとても素晴らしかった。たとえば、Server Actionを触る際にはProgressive Enhancementの考え方を切り離せないのだが、そのあたりも触れられているし、Optimistic UpdateやValidation周りにも踏み込んでいて、「ほらね！簡単にServer側の関数呼べて便利でしょ！」みたいな表面だけの内容にとどまっておらず、まさに実践って感じだった。 revalidate周りも、何をどこでいつ呼べば描画がリフレッシュされるのかの把握が結構難しいポイントで、Server Actionと組み合わせると特に混乱する部分だと思う。ただ、理解できると一気に便利になる部分でもあって、そのあたりが丁寧に解説されているのはとても助かる。
実務でやってて書籍になかった部分で知りたくなるとこ
本書で触れられていないけど実務だと困ることが多いもの挙げるなら、テスト周りかなと思う。
Server/Client Component周りで使えるツールが変わってきたり、そもそもそのままだとテスト自体困難だったりする。テストを意識してコンポーネント設計から検討する必要があるなど、結構大変な部分になる。（大変だからこそ、そこまで書籍で触れてたらとんでもない物量になっちゃって割愛されたのかなという気もしている）
ただ、そもそも大前提としてフロントエンドテスト周りの知識がある程度無いと、Next.jsでのテストにいきなり立ち向かうのは困難なのが実情だと思う。本書より先にテストだけで一定の知見を得てから公式ドキュメントの情報などを参考に立ち向かうと良いのでないだろうか。
そういえばフロントエンドテストに関するいい本があったような…？？
現場で役立つテスト手法を基礎から解説！「どこから」「どうやって」手をつければよいかわかる 本書は、Webアプリケーション開発に携わるフロントエンドエンジニアを対象に、「テスト」の基本知識と具体的な実践手法を解説した書籍です。 高度な機能を画面上で提供する現代のWebアプリケーションでは、その品質や保守性を担保するうえで、フロントエンドにおける自動テストが重要な役割を持ちます。 本書はそんな「フロントエンドにおけるテスト」をテーマに、基本的なテストコードの書き方や、目的に応じたテスト手法・ツールの使い分け方を解説します。「UIコンポーネントテスト」や「ビジュアルリグレッションテスト」など、フロントエンドならではの具体的なテスト課題に重点を置いており、基本から実践まで必要な知識を体系的に身につけることができます。 解説はサンプルWebアプリケーション（Next.js）を舞台にしたハンズオン形式で進みます。「アクセシビリティの改善」や「CIでのテスト実行」といったトピックもフォローしているので、開発現場で役立つ実践的な知識・ノウハウがきちんと身につく一冊です。 ■こんな方におすすめ ・テストの必要性は理解しているが着手できていない ・それなりに開発経験はあるがテストを書いたことがない ・現在取り組んでいるテスト手法が最適かわからない ■本書で取り上げるテストツール Jest／Testing Library／Storybook／reg-suit／Playwright...etc ■目次 第1章 テストの目的と障壁 第2章 テスト手法とテスト戦略 第3章 はじめの単体テスト 第4章 モック 第5章 UIコンポーネントテスト 第6章 カバレッジレポートの読み方 第7章 Webアプリケーション結合テスト 第8章 UIコンポーネントエクスプローラー 第9章 ビジュアルリグレッションテスト 第10章 E2E テスト 【ダウンロード付録】 付録A GitHub Actionsで実行するUIコンポーネントテスト 付録B GitHub Actionsで実行するE2Eテスト ※翔泳社の書籍サイトからPDFをダウンロードできます。 ※本電子書籍は同名出版物を底本として作成しました。記載内容は印刷出版当時のものです。 ※印刷出版再現のため電子書籍としては不要な情報を含んでいる場合があります。 ※印刷出版とは異なる表記・表現の場合があります。予めご了承ください。 ※プレビューにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください。 （翔泳社）
内容がすぐに古くなっちゃう？
雑談してる中で、本書籍に関して「Next.js更新激しいから内容すぐ使えなくなっちゃうんじゃない？」みたいな話を聞くことがあった。
私の意見としては、それは完全には否定できなくて、アップデートによって個々のAPIの細かい挙動はどんどん変わるだろうし、記載されている内容と乖離が出てくることは普通にあり得るとは思う。ただ、Next.js App Router が提供するベースとなる概念まで覆ることは無さそうで、それらは今後更新があってもNext.jsを使っている限りは腐ることは無い気がする。
そういったベース概念こそがApp Routerを理解するうえで一番難解な部分であって、同時に特に大事な部分だったりする。今は公式ドキュメントがある程度整っているので、それをガッツリ読み込めば一通り理解はできるけど、それでも理解が難しい部分や説明がわかりづらい部分もあるため、永遠に不安な気持ちになると思う。 そのあたり、日本語かつハンズオン形式で実践的に学ぶことができるのはとてもありがたく、複数の角度から知見を固めるためのリソースとして大変貴重な一冊だと思う。
あとはそもそもの話でもあるけど、本の内容が古くなることを気にしてたらWeb技術に関する書籍なんて何も買えなくなっちゃう気はする。HTMLの仕様だって "Living" Standard だし。
古くなる前に買って読めば解決だ！
最新のNext.jsを現場で使うために実践的な知識を詰め込んだ一冊です。フレームワークの基礎はもちろん、パフォーマンスを上げるための知識や関連ライブラリまで、詳細なサンプルコードをもとに解説していきます。
まとめ
- Next.js App Router を理解したくて、 RFC・公式ドキュメントなどを読んで理解できる自信がなければ買っといて損はないと思う
- 買うか悩んでるならとりあえず買っとけばよさそう
- とりあえず今後自分は他の人に学習リソースを第一にオススメすると思う
大変素晴らしい一冊でした。ありがとうございました！