Upgrade to Pro — share decks privately, control downloads, hide ads and more …

プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話

CyberAgent
December 20, 2023
1.8k

プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話

CIUでは、プライベートクラウドのWeb UI開発にNext.jsを用いています。 今回はCIUのフロントエンド組織の現状についてお話した後

・なぜNext.jsを使うのか
・古いNext.js製サービスをどのようにApp Router化したのか
以上を中心に、CIUのフロントエンド組織の今後の技術戦略などについて、Muddyな内容を織り交ぜながらお話します。

CyberAgent

December 20, 2023
Tweet

Transcript

  1. Next.js is a shock absorber Next.jsは「Reactの緩衝材」として使う ・あくまでReactのAPIの抽象化層とみなす ・当然使わない機能もある  ・例えば   ・fetch(クライアントサイドfetchで代用)

      ・middlewareによるproxy(API Routesかnext.config.jsで代用)  ・Next.jsを知らない人が見て一目で分かるかをもとに取捨選択
  2. “use client” ディレクティブ追加 pages to app中に “use client” が無い旨のエラーが出るので手作業で修正 ・シェルなどで全TSXファイルに機械的に追加はしない

     ・パフォーマンスの観点から積極的にSCを利用する ・CCはSCを含めないので、適宜propsにchildrenを追加する
  3. API Routes to Route Handlers pages/api から app/XXX/route に移行 ・書き方が若干変わるので、手作業で修正

    ・認証に使用しているnext-authも移行  ・next-auth側でApp Routerは 対応済み
  4. バンドル結果 (nextのbundle analyzerで計測) Pages Router製サービス(AKE) ・クライアント:サーバー = 2.45MB:2.23MB 計 4.67MB App

    Router製サービス(IAM) ・クライアント:サーバー = 2.57MB:3.4MB 計 5.97MB 全体の容量は増えているが、App Routerでクライアント < サーバーができた →増えた要因は内製したUIなどのSDK →だが、ある程度サーバーサイドに持っていけた
  5. Lighthouse (3回計測した平均スコア 計測対象はTOPのリスト表示ページ) Pages Router製サービス(AKE) ・Perf:A11y:BP:SEO = 84:74:100:91 App Router製サービス(IAM) ・Perf:A11y:BP:SEO

    = 99:87:100:82 参考程度ではあるが、パフォーマンスが向上した →Speed Indexが大幅に改善(4.8s→0.4s) →RSCというより、Static Renderingの効果かもしれない