はじめましての人ははじめまして。そうでないひとはお久しぶりです。猫ロキP(@deflis/id:deflis55)です。
最近個人開発でNext.jsのapp routeをつかってみたのでその感想を書きたいと思います。 つれづれないままなので、まとまってなかったらすみません。
App Routerとは
Next.jsにおける、新しいアーキテクチャのルーティングです。 特徴としては、基本的な処理がServer Componentになり、ほとんどがSSG/ISRになるところでしょうか。
useStateなども使えないので、基本的にはpropsを受け取るか、fetchなどでデータを取得することになります。 fetchされるものも基本的に静的になるので、静的サイトジェネレーターとしての機能が強くなったイメージです。
なぜApp Routerを使ったのか
単純に、Next.jsの新しい機能を使ってみたかったからです。
また、（ここではリンクを張りませんが）作ったものはYouTubeやブログの更新情報を含んだポートフォリオなので、ほぼ静的サイトだけどもたまに更新されるという性質だったので、App Routerに向いていたからです。
というのは後付けの理由で、やってみたらそういうポートフォリオであればかなりApp Routerの特徴を活かせるなと思いました。クライアント側で動的に要素を変える必要がほとんどなければかなりいい選択肢になると思います。
使ってみてよかったところ
よかったところとしては、コンポーネントに直接fetchを書くと自動でISRされるところです。 今までReactQueryとかで苦労して取得していたりしたのでそういうのがスッキリ書けるようになった気がします。ずっといろんな難しい感じでデータ取得処理を書いていた感じがするので、これでだいぶ楽になるかなぁと思いました。
fetchの引数に revalidate を書くだけで、ISRの間隔を設定できるようになったのも革命的だと思いました。
これによって、既存のノウハウをそのまま活かしてISRを書くことができて非常に便利でした。感覚的にはSSRで書いているのと同じ感じで開発できました。
使ってみてよくなかったところ
よくなかったところとしては、クライアント側にコンポーネントを移さないと以前のノウハウやコンポーネントが利用できなくなっているところです。クライアントサイドで処理をするように"use client";を書けばいいんですが、そういうことを書くと頭の中でコンテキストスイッチが走るので難しいなと思ったりしています。
あと既存のコンポーネントをそのままServer Componentとして使えなくなっていそうな感じがしています。例えば、Material-UIとかを使おうとするとクライアントコードが増えて大変だろうなと思います。ただ、Next.jsとその手のコンポーネントの相性は年々悪くなっていっている印象があります。 Next.js的にはCSSモジュールやTailwind CSSを使ってほしいというのは見えていて、そういうCSSを直接各時代に戻ればそこまで問題ではなさそうとは思いますが…。
今回の場合は移行元のサイトがCSSフレームワークのBulmaを使っていたので、デザインそのままで移植しました。今回はこれで乗り切りましたが、Material UIとかEmotionを使っていたらもっと移行が大変だっただろうなと思っています…。
ディレクトリの切り方の工夫とかも必要そうで、atomic designの上になにかもう一つレイヤーがいりそうだなとかそういう事を考えています。
今回はあまりコンポーネントが多くなかったので適当に /components にServer Componentを置いて /components/client にClient Componentを置くことにしました。
なんかいい感じの切り方が他にあるなら教えてほしいです。
また、今回はつかってないんですが、Server Actionsを使ったフォームとかの処理に面食らう人も多そうな印象です。良くも悪くもPHP的な感じが否めず、まだ粗削りで変なところにバグを仕込んでしまいそうな感じがしています。そのうちこれをベースに、React-hook-formみたいないい感じのライブラリが出てきてくれることを祈っています。
まとめ
ポートフォリオみたいな半静的サイトを作るようなときの選択肢としてはApp Routerがかなり良いと思います。 XMLパーサなどのNode.jsの資産はだいたい使える感じですし、ISRもわかりやすくなりました。 ちょっとしたCSRを含む程度ならページのレンダリングは爆速です。
一方、まだベータですがServer Actionsはまだまだこれからという感じを受けました。そもそも新しいパラダイムで周辺環境が整っていないのもありますが、使い方に注意が必要でまだ実運用で使うときには大変だろうなと思いました。しかし、良くも悪くもまだ出たばかりの機能なので、今後どのようにエコシステムが発展していくのかが気になっています。これらのデメリットはエコシステムが広がれば問題なくなるところだと思っています。
色々文句は書いていますが、その手間に見合うメリットはかなりあると思っているので今後も使っていきたいと思います。 さすが業界最大手のNext.jsという感じでした。Gatsby潰しだ…！
