概要

  • フロントエンドエンジニアなら、React だけでなく Next.js も学ぶ必要があるという話
    • 社外の数人との話をまとめると Next.js の需要が高いそうだ
    • ここら辺の理由を推測も交えつつまとめる

フロントエンドエンジニアなら、React だけでなく Next.js も学ぶ必要があるという話

背景

現職の会社以外の方との話によると、どうやらフロントエンドエンジニアを名乗るなら React だけでなく、Next.js までできたほうがいいらしい。

ちなみに複数人に同じこと言われたので、この話はある程度信憑性もあるのだと思う。この話を聞いて自分でも実際に Next.js を触ってみたので、この記事では気が付いたことを書いておく。

Next.js のメリット

今のところ次の３つのメリットがあると感じている。

  • ログ出力、メトリクス
  • アクセストークンをブラウザに露出しなくて済む
  • ルーティング機能が組み込みであること／ファイル構成が統一されること

まず前提として、React はユーザーデバイスのブラウザで動く SPA アプリのライブラリだ。 だから React のアプリケーションを配信するにはコンテンツ配信サーバーないしファイルストレージがあれば良い。（⇔ ロジックを処理するための CPU 付きのサーバーにデプロイする必要はない）

一方で Next.js はユーザーデバイスで動く部分と、フロントエンドサーバーで動く部分を１つのリポジトリで管理できる。

graph TD
subgraph React
User1[👤 ユーザー]
CDN[📡 CDN/静的ホスティング]
Browser1[🌐 ブラウザ]
User1 --> CDN --> Browser1
Browser1 -- CSR 実行 --> Browser1
end

    subgraph Next.js
        User2[👤 ユーザー]
        Server[🖥️ Next.jsサーバー]
        Browser2[🌐 ブラウザ]
        User2 --> Server --> Browser2
        Browser2 -- ハイドレーション/CSR --> Browser2
    end

図：React と Next.js のシステム構成の違い

よって React でログ出力をしてもそれはユーザーのブラウザでしか表示されないが、 Next.js を使えばサーバー側にログを出力できる。また Next.js はサーバーサイドで API 呼び出し等のメトリクスを表示することができる。

これがまず１つ目のメリットだと考えていて、商用の Web アプリケーションを作成するならばログ出力やメトリクスはマストになると思うので、Next.js を学ぶ必要があると思った次第だった。

２つ目のメリットとして挙げたアクセストークンについては、まず OIDC の基盤となる OAuth2.0 ではユーザーだけでなく、フロントエンドアプリケーション自体も認可サーバに認証を行う必要がある。 このフロントエンドアプリケーション自体の認証情報と、リフレッシュトークン（アクセストークンの有効期限が切れた場合の更新用トークン）はシステム外のユーザーのデバイスに乗ってしまうとまずいことになる。

そしてこれらの情報はブラウザだけで動く React だけでは当然管理できないため、必然的に専用のバックエンドサーバーを立てるか、Next.js 等のサーバーサイドを含んだフレームワークを使う必要が出てくる。

Next.js の場合、Authentication の仕組みがある程度準備されているため、専用のバックエンドサーバーを立てるよりも効率的だと考えている。

最後にルーティングとファイル構成について言うと、Next.js ではディレクトリ構成がそのままクライアントサイドルーティングのパスになる。そしてレイアウトファイルとルーティングファイルは固定名なので誰が実装しても場所と名前が同じになり、管理がしやすい。 一方で React だとルーティング用のライブラリ(大体React-router-dom)を入れ実装が必要なのと、ファイル構成は実装者の力量によってきれいだったりそうじゃなかったりする。 （まあReact-router-domに関しては、自由度が高くて個人的には好きなライブラリなのと単純に使う分には Next.js と実装量はあまり変わらない。とはいえ品質は Next.js のほうが安定するかも。）

まとめ

冒頭に書いたフロントエンドエンジニアに Next.js が求められる理由は、商用のアプリケーションを作成するため必要な構成になっているからだと解釈した。

実際に触ってみても、実用性が大きく採用されるだけの理由があるフレームワークだと感じた。（歴が浅いため、デメリットがわかっていないだけかもしれないが）

React はある程度理解できている（つもり）ので、Next.js をこれから技術スタックに積んでいこうと思う。

まあ Svelte とか SCSS とか触りたい分野は他にもあるのだが。。

蛇足

  • やりたい学習はたくさんあっても、ついつい Youtube 見たり将棋ウォーズを起動したりしてしまう
    • とはいえスマホ依存は昔より改善できたところもあって、今まで実施した対策とこれからいかにスマホ依存から脱却するか？という内容もブログにしてみたい
  • 次はマルチ AI エージェントシステムの構築方法についてまとめる予定