先日出版された『実践 Next.js ― App Routerで進化するWebアプリ開発 』について、著者の @takepepe さんより献本頂いた。ありがとうございます！
@takepepe さんの実践Next.js本を献本頂きました！ありがとうございます！
— mugi (@mugi_uno) 2024年3月10日
読むぞ〜 pic.twitter.com/mpcWHJJRJq
献本いただいた者の責務として、大変恐縮ではあるが、書評を残させてもらう。
自分とNext.js（App Router）
「実際のところ君はNext.jsとかApp Routerのことは知っとるんか？」という話だが、業務でApp Routerを使ったフロントエンド刷新に関わっているので、それなりには把握しているつもりではいる。ただ、Pages Routerに関してはあんまり触ったことはない。少し趣味や副業で触れたことはあるが、知見がすごいあります！と言えるほどではない。
App RouterそのものはStableになる前（当時はapp dirとか呼ばれてた気がする）から触っていて、その後に追加された機能も全部を触っているわけではないが、一通り情報は追っている。Server Actionとかも使ってて、業務で得た諸々の知見を2023年の末にあったJSConf JPで発表したりもしてる。
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でのテストにいきなり立ち向かうのは困難なのが実情だと思う。本書より先にテストだけで一定の知見を得てから公式ドキュメントの情報などを参考に立ち向かうと良いのでないだろうか。
そういえばフロントエンドテストに関するいい本があったような…？？
内容がすぐに古くなっちゃう？
雑談してる中で、本書籍に関して「Next.js更新激しいから内容すぐ使えなくなっちゃうんじゃない？」みたいな話を聞くことがあった。
私の意見としては、それは完全には否定できなくて、アップデートによって個々のAPIの細かい挙動はどんどん変わるだろうし、記載されている内容と乖離が出てくることは普通にあり得るとは思う。ただ、Next.js App Router が提供するベースとなる概念まで覆ることは無さそうで、それらは今後更新があってもNext.jsを使っている限りは腐ることは無い気がする。
そういったベース概念こそがApp Routerを理解するうえで一番難解な部分であって、同時に特に大事な部分だったりする。今は公式ドキュメントがある程度整っているので、それをガッツリ読み込めば一通り理解はできるけど、それでも理解が難しい部分や説明がわかりづらい部分もあるため、永遠に不安な気持ちになると思う。 そのあたり、日本語かつハンズオン形式で実践的に学ぶことができるのはとてもありがたく、複数の角度から知見を固めるためのリソースとして大変貴重な一冊だと思う。
あとはそもそもの話でもあるけど、本の内容が古くなることを気にしてたらWeb技術に関する書籍なんて何も買えなくなっちゃう気はする。HTMLの仕様だって "Living" Standard だし。
古くなる前に買って読めば解決だ！
まとめ
- Next.js App Router を理解したくて、 RFC・公式ドキュメントなどを読んで理解できる自信がなければ買っといて損はないと思う
- 買うか悩んでるならとりあえず買っとけばよさそう
- とりあえず今後自分は他の人に学習リソースを第一にオススメすると思う
大変素晴らしい一冊でした。ありがとうございました！
