課題：レガシーjQueryの重い管理画面がユーザー離脱の原因に
5年前にjQueryとサーバーサイドレンダリングで構築されたB2B SaaSの管理画面は、機能追加のたびにスパゲッティ化が進み、初期ロードに4〜5秒かかる状態になっていました。ユーザーからの「画面が重い」「古い感じがする」という声が増加し、解約率にも影響が出始めていました。
CTOはNext.js（TypeScript）への刷新を決定しましたが、社内のフロントエンド専任エンジニアが1名しかおらず、バックエンド（Python）エンジニアが兼任している状況では作業が進みませんでした。
解決策：Next.js専門エンジニアがアーキテクチャ設計から実装をリード
- Next.js App Router + TypeScriptの構成を提案・設計し、コンポーネント設計ガイドラインを策定
- 既存jQueryコードをReact Server Components + Client Componentsに分離しながら段階移行
- shadcn/ui + Tailwind CSSでデザインシステムを構築し、UIの一貫性を実現
- SWRによるデータフェッチの最適化・レンダリング戦略（SSR/SSG/ISR）を適切に使い分け
- 画像はNext.js Imageコンポーネント + WebP変換で軽量化
- Storybook + Vitestでコンポーネントテストを整備
成果・効果
全面刷新から4ヶ月でLighthouseスコア100点（Performance）を達成し、旧サイト比で表示速度が3倍以上に改善されました。TypeScript 100%のコードベースになったことで型エラーによるバグが激減し、社内エンジニアが独力でメンテナンスできる状態になりました。「ユーザーから表示が早くなったと声をもらえるようになった」とのご評価をいただきました。