😋

Next.js のリリースは追っておこう

に公開
Next.js
React
frontend
リリース
アップデート
tech

この記事は Magic Moment Advent Calendar 2024 16 日目の記事です。

Magic Moment でフロントエンドエンジニアをやっている negishi です。
最近引っ越しをしたのですが、自宅から 10 分圏内にラーメン二郎・家系・中本があるのでラーメン好きな私の QOL が最高潮に達しています。

はじめに

弊社は React を採用しフロントエンド開発を行っています。
React でフロントエンドを開発する際には、公式ドキュメントでも推奨されているように Next.js や Remix (react-router-dom v7 に統合されましたね) などのフレームワークを用いることも選択肢として存在します。
弊社ではこうしたフレームワークは採用しておりませんが、最近 Next.js にフロントエンドメンバーで触れる機会がありました。
React のフレームワークとして長らくデファクトスタンダードとなっている Next.js ですが、アップデートリリースも頻繁に行われ、フロントエンド界隈をその度に賑わせています。

Next.js を採用しているチームにおいてはもちろんこうしたリリースは追っているかと思います。ですが、個人的には弊社のような React を採用しているものの特にフレームワークは使用していないというチームにおいても、Next.js のリリースを追い続けることには意味があると考えています。

本記事においては、その理由について自分なりにまとめたものを記載していきます。

なぜ Next.js のリリースを追った方が良いのか

最新の React の機能をいち早く体験することでアーキテクチャ的な先読みができる

多くの場合、React のリリース候補として公開される experimental な機能 (RC) は、Next.js の最新版において使えることが多いです。
React としてはまだ実験的であるものの、Next.js が先行してそうした機能を使えるようにすることで開発者コミュニティからのフィードバックも得やすくなることで改善につながったり、最新機能を使うことで開発者体験を向上させつつユーザー体験を向上させやすい、といったメリットもあります。
実験的な機能をプロダクションコードに直接的に取り入れることには安定版を取り入れるよりもリスクはありますが、実験版と安定版の差異もフレームワーク側が吸収してくれるのは、開発者としても嬉しいですね。

具体例を挙げると、React の v19 (2024/12/05 リリース) で安定版となった React Server Components (以下 RSC) は、Next.js の v13.4 (2023/05/04 リリース) で App Router とともに利用できるようになりました。

RSC を念頭に置く場合、RSC 独自のメリットや制約もあるため、今までのコンポーネント設計とは大きく変わる可能性が高いでしょう。
RSC 前提のコンポーネント設計については、以下の記事の Composition パターンやContainer/Presentational パターンのセクションが参考になります。
(他にも Next.js の考え方について非常によくまとめられており、読み応えのある素晴らしいものでした)

こうした React の実験的機能を先行して使えたり、また最低限 Next.js 最新版でリリースされた React の実験的機能があることを知れることにより、今後 React はどのような方向性で進化していくのかを垣間見ることができます。
それにより、React の進化に追従しやすくなるようなアーキテクチャ・コードを事前に考え、チームとしてどのような方向が最適であるかをより議論しやすくなるでしょう。

フレームワーク選定時の比較・検討がしやすい

はじめに にも記載しましたが、Next.js は React のフレームワークにおけるデファクトスタンダードと言えます。
例えば新たにプロダクトをローンチする際の技術選定や既存プロダクトにフレームワーク導入を検討する際、デファクトスタンダードとなるライブラリ・フレームワークをどの程度把握しているかによって、他との比較の難易度・スピード感は全く異なってくると思います。
具体例としてこの記事では Next.js を挙げていますが、これは他のフレームワーク・ライブラリでも同じことが言えるのではないでしょうか。

何かを比較する際には基準が必要ですが、その基準となってくれるものがデファクトスタンダードです。
時間のない中で開発を進めなければならない、その開発を進めるためにも基盤となる技術選定・調査をしなければいけない時に、基準が既にあるのとないのとでは、そもそもの比較が可能であるかや、結論に到達するまでのスピードに大きく差が出てくるでしょう。

そうした点においても、React のフレームワークとしてデファクトスタンダードの地位を築いている Next.js の動向を追うことには意味があると考えます。

ワイワイして楽しい

最もプリミティブな理由です。
(この前 Netflix の地面師たちを見ました。内容には触れませんが、特筆すべきシーンで使われているセリフの一つです)

Next.js は非常に多くのフロントエンド開発者が注目するフレームワークであり、毎年開催される Next.js conf は毎回大きな盛り上がりを見せていますし、アップデートリリースの際にも各 SNS で国内・国外問わず多くの開発者がリリース内容に触れたりしています。
Next.js conf は私自身、最低限 keynote だけは毎年オンラインで見るようにしているのですが、オフラインの盛り上がりを見ると大きな開発者コミュニティの一体感を感じますし、新たな機能のリリースに際するワクワク感は画面越しにも伝わってきます。
同じ OSS に期待しているものとして、リリースを通してワイワイしつつ、楽しみを共有し合えるのは幸せなことだと思います。

これは Next.js に限った話ではありませんが、気になる OSS のリリースはこうした純粋なワクワク感からもチェックしておくと良いでしょう。

最新情報のリソース

ここまで Next.js のリリースを追った方が良い理由について触れてきましたが、ここで私が主に情報源としているものについていくつか挙げておきます。

X アカウント

  • 公式
  • Guillermo Rauch
    Vercel (Next.js 開発元) の CEO の方です。
  • Lee Robinson
    同じく Vercel の方です。DevRel 的な活動もされており、参考になるポストや動画が多いです。

他にも参考になるアカウントだったり記事は多くありますが、公式という意味だと上に挙げたページやアカウントが Next.js のリリースを追う上で更新頻度も高く、とても参考になります。

おわりに

この記事では Next.js を題材としましたが、他のフレームワーク・ライブラリにおいても共通となることがあるかもしれません。
進化や流行の移り変わりが早いと言われ、最新動向を追うのが大変だと言われるフロントエンドですが、その分色々なことを知れる機会があり個人的にはとても楽しい領域だと思います。
過去の膨大なデータを学習できる LLM が台頭してきた今だからこそ、まだ LLM が学習しきれていない最新技術を人間が追うことの価値は相対的に上がっているのかもしれませんね。
これからも Next.js に限らず、色々と楽しみつつ吸収していきたいなと改めて思いました！

さて、次回のアドベントカレンダーは scent-y の「Go で Protocol Buffer で JSON エンコード・デコードする」です。
お楽しみに！

Discussion