フューチャー技術ブログ

Next.jsにするか他のフレームワークにするか迷っている人はNext.jsを選べばいい

タイトルで言いたいことは言ってしまっているのですが、2017年ぐらいからNext.jsを使ってきて、最新の情報のキャッチアップとかもそんなに苦労はなくて、こだわりがないならNext.jsでいいのでは?という記事です。

Next.jsは大きすぎる?

フレームワークが大きいのはたいていそうで、提供されているすべての機能を使うわけではなく、その一部だけを使います。そのサブセット自体がシンプルであればフレームワークはどれだけ大きくても問題はないはずです。JavaとかPythonとかGoのコード書いてもごく一部のライブラリしか使わないわけで、でもそれに対して「ライブラリがでかすぎる」とは言わないですよね。

Next.jsは「より高速にする」機能がたくさんありますが、別にそんなの最初から使う必要はないですし、サービスによってはそもそもその機能が合わない、というのもあります。ユーザープロフィール画面にISGとかSSGは使わないでしょう。

最低限の部分を取り出せば、ファイルシステムベースのルーターがあって、SSRしてくれる、ぐらいでしょう。それ以外は素のReactをそのまま使う、という作戦でいいかと思います。データのフェッチもgetServerSidePropsとか使わずにuseEffectとかuseSWRで取得しちゃえばいい。そうなれば、ルーター周りのちょっとしたコードぐらいが差分で、あとはReactそのものになります。

静的なJSファイルを出したい、という場合はVite+Reactでも良いと思いますが、ルーターすらないので、「EasyよりもSimple!」派でないなら、ここもNext.jsでもいいかなって思っています。

Vercelを売るための機能が多い、みたいなのも見かけましたが、オプショナルな機能でいくつかあるだけかなって思います。ぱっと見つけたのはビデオファイルをVercel Blobにもおけるよ、とかOpenTelemetryとか。別に不要であれば使わなければ良い機能ぐらいかと思いますし。GoのPlan9対応みたいなものですよね。

Next.jsは変化が早すぎる?

Next.js 4の時代からするとコードの書き方は大きく変わりました。クラスコンポーネントが関数コンポーネントになってhooksが登場し、TypeScriptが当たり前になって、Reduxでがんばってconnectの定義を書いていたのが、今では嘘のようです。

とはいえ、これってNext.js側の変化ではなくて、Reactの変化ですよね。Server Actionsは派手なNext.jsの機能に見えて、これもReact本家の方の機能だったりします。

Next.js側も変化はありますが、機能追加はあっても機能の削減で困ることはいまのところなかったように思います。app routerの登場は大きかったですが、これはむしろ、React本家が導入したReact Server Componentを実現するためのNext.js側が用意した解、みたいな感じです。

ビルド周りとか設定周りは大きく改善されました。ビルドもかなり高速になりました。自前でかなり手を入れていた人には厳しいでしょうが、なるべく設定を変更せずに使う、というのが今時のウェブフロントエンドの渡世術かな、と思います。少ないコストでエコシステムの進化の恩恵を享受できるコツです。

フレームワークを採用する上で大事なこと

Next.jsの一番の価値は、JS界のさまざまなライブラリとの繋ぎ込み方法がexamplesというフォルダにあって、動作検証されていることかなって思います。JS界隈はライブラリが多いので組み合わせではまったり、とかはあるのですが、すくなくともNext.jsとこのバージョンのこのライブラリならつながる、という情報があるのは大変ありがたいことです。

https://github.com/vercel/next.js/tree/canary/examples

それだけではなく、たとえば認証どうしよう、とか、実現したいことに対する情報がたくさんあって、それを支えるライブラリもたくさんあって・・・というところですね。ようするにエコシステム。仕事で使う場合に、何かトラブルがあってもすぐに解決したい!というのであれば、ないよりはあった方が良いものですよね。

あえて積極的にNext.jsを触る理由

Reactの開発は、それ自身に閉じるのではなく、サーバー側との連携機能などは外部のフレームワークともやっていくぞ!というのはReact Server Componentのときに語られています。Next.jsはReactフレームワークの中では旗手ではありますし、新機能が最初に使える環境となっています。React Compiler楽しみですよね?そういうReact側の機能を早く試してみたい人にはNext.jsが一番良いとも言えるかと思います。

まとめ

強い意志を持ってAstro.js使いたい!とか、トラブルはむしろ大歓迎!みたいな人とか、趣味でやっているしむしろ人がやっていないことに価値がある!みたいに思っている人は、そちらを選べば良いと思います。

逆に、そういう強い思いがない人であれば、とりあえず朝くNext.jsを触るのがいいんじゃないかな、という記事でした。