Nuxt.jsからNext.jsに 乗り換えるにあたって 大変だったこと

Transcript

1. Nuxt.jsからNext.jsに 乗り換えるにあたって 大変だったこと 各社から学ぶ！ フロントエンドのための リアーキテクチャ
2. 2 めろたん @renyamizuno_ - リーナーテクノロジーズ - 主にフロントエンドに従事 - たまにサーバーサイドも - JSとHTMLとCSSが好きです 自己紹介
3. Nuxt.jsからNext.js に移行しました！
4. 4 移行の背景
5. 5 移行の背景 2023年末にVue2がEOL リーナ見積ではNuxt2を使っている Vue3にアップデートする or 他のライブラリに乗り換え
6. 6 移行の背景 移行を決定した背景 - Vuetify2を使用していた - Vue2, Nuxt2, Vuetify2を同時に 上げる必要がある - 他プロダクトですでにNext.jsを使っていた - エンジニアの知見の共有・ローテ面で FWを揃えたほうが良いのでは
7. 7 移行の背景
8. 8 移行の背景 期間はおおよそ１年 - 3つの画面を順次リリースする - 移行前の画面は、機能開発は行わない - 移行後は機能開発を行う - 予定通り1年で完了 人数は1~6人（多くの期間が3人） - 最初期は1人で進めていた - 技術検証を行う・大枠の作り方の検討
9. 大変だったこと
10. 10 移行時に大変だったこと 開発メンバーの習熟 ユーザビリティの低下 パフォーマンスの低下
11. 11 開発メンバーの習熟 少人数で移行を進めていた 参加していないメンバーが、移行後完了後に Reactで開発を進められるように考える必要が あった スピードを維持しつつ、他メンバーにもどう開発 しているか理解して貰う必要がある
12. 12 開発メンバーの習熟 一定の移行まで 大きい機能の 移行時 移行最終段階
13. 13 Nuxt時代にページのコンポーネントで、 その画面で使う状態をすべて保持していた デバッグ時に複雑であったため適切に各コンポー ネントで状態を保持するよう変更した ユーザービリティの低下
14. 14 タブコンポーネントを切り替えると、入力した内 容が消える問題が発生した Nuxt時代はページのコンポーネントで状態を保 持していたため、消えなかった Next時代は状態を保持していたため、都度初期化 されてしまう ユーザービリティの低下
15. 15 ユーザービリティの低下 コメントを入力
16. 16 ユーザービリティの低下 タブを 切り替える
17. 17 ユーザービリティの低下 入力内容が 消えてしまう
18. 18 Nuxt時代はマウント時に 必要なAPIを一回叩くという設計 NextからはSWRを使い、 適宜リバリデートを行うようにした パフォーマンスの低下
19. 19 結果リクエスト数がNuxt時代と比べると増え サーバーがリクエストを受け付けられなくなる問 題が発生 サーバーの設定の問題であったが、リクエスト数 が増えることはわかっていたので、事前に調整す べきだった パフォーマンスの低下
20. 20 おわりに 短い時間で話しきれないことがいくつかあります ブログで発信しています！ X(旧Twitter)で気軽に話しかけてください！
21. ありがとうございました