はじめに
こんにちは。talentbook開発部の岩村です。
弊社ではフロントエンドフレームワークにNuxtを利用しておりましたが、Next.jsへの移行プロジェクトが2025年9月に完了しました。今回は、その成果と進め方、良かったことなどについてお伝えいたします。
プロジェクトの全容と効果
プロジェクト全体としては以下のとおりです。
- 期間 2024年4月 ~ 2025年9月
- 大まかなマイルストーン
2024年4月: Next.jsへの移行を決定、週3稼働のフロントエンジニア1人でアサイン開始
2025年4月: フルタイム2人のリソースを投入し本格始動
2025年9月: プロジェクト完了
移行の効果としては大きく2つが挙げられます。
1.日本でユーザーが多いReactベースのエコシステムへ移行できた
Next.jsを選択したことで、国内のエンジニア採用やコミュニティ活用の面で大きなメリットを得られました。
2. パフォーマンスが劇的に改善した
P50レイテンシ93%削減(434ms→29ms)
P95レイテンシ61%削減(1,052ms→648ms)
レスポンススパイクの安定化(頻繁に10秒超え→ほぼ消失)
※ Nuxtの3日間のレイテンシーヒートマップ。1秒を上回るようなところで収束していた。
※ Nextの3日間のレイテンシーヒートマップ。ほとんどが1秒未満で収束するようになった。
この改善により、ユーザー体験が大幅に向上し、SEO評価の改善やコンバージョン率の向上も期待できます。
※最近talentbookにアクセスしていなかった方は、ぜひいろんな記事を読んでみてください。快適に閲覧できるかと思います。
これらの成果を実現できたのは、以下の3つの要素がそろっていたからです。
- 長期的な技術投資への組織の理解: 短期的な売上に直結しない技術的負債解消に1年半のリソースを投入
- 10人の少数精鋭チーム: 移行プロジェクトと新機能開発を並行遂行
- 柔軟なツール選択: 投資したツールに固執せず、最適な手段を選び直す判断力
ここからは、それぞれについて詳しくお伝えします。
プロジェクトの成功に寄与した3つの要素
1.長期的な視点での技術投資
私たちのNext.js移行プロジェクトは、実は3年前から始まっていました。移行プロジェクトを検討した理由は、Nuxt2のEOL(サポート終了)でした。そのため、最初はNuxt-bridgeなど、リーズナブルな移行先を検討していました。
しかし、技術調査や現状のコードベースからの変更量を考慮すると、ほぼ書き直しに近い作業量が発生する事がわかりました。検討段階では、エンジニアが少なかったため、他の開発ができなくなってしまう状況が許容できず、すぐには着手できませんでした。
その後の2024年4月に、ReactベースのフレームワークがVueに比べて記事やエンジニア数が圧倒的に増えてきていたことや、NuxtとNext両方に知見があるメンバーがジョインしてくれた事などから、Next.jsに移行することに決定しました。
そこから、少しずつ設計や方針を固め、2025年4月にフルタイム2人以上のリソースを投入し本格始動し、2025年9月にプロジェクトを完了させました。
この長期的な取り組みを支えてくれたのは、「目先の機能開発だけでなく、技術的負債の解消も重要」というビジネス側の理解でした。短期的な売上には直結しない技術投資に、長い期間リソースを割り当てる判断は、簡単ではなかったはずです。
2.少人数チームでの並行案件遂行力
移行プロジェクト中も止まらない新機能開発
このプロジェクトで特筆すべきは、Next.js移行を進めながら、同時に新機能開発や重要な改善案件も並行して進めていたことです。
われわれのプロダクト開発部は、当時PM含めて10人(うち1名は週3、1名は週1)で決して多くありませんが、
- フルスタック人材の存在: フロント・バック両方を理解するメンバーがいることで、各人が並列に動いても全体を前に進められる
- 役割の流動性: 状況に応じて優先度の高い案件にリソースを柔軟に配分
- 情報共有の徹底: リモート環境でも密なコミュニケーション
- 相互サポート: Next.js初学者もAIツール活用で早期キャッチアップ
といったことにより、皆が効率的に業務を進めることができ、結果として並列で案件を遂行することができました。
※ 本番デプロイ回数のグラフ。talentbookでは現在11期の4Qなので、プロジェクト中でもデプロイ回数は昨対比を上回っている。
3.AI開発ツールの効果的活用:固執せず最適解を探す
さらに、この協働体制を加速させたのがAI開発ツールの戦略的活用です。
2025年5月にDevin活用記事を公開した時点では、Devin(月額$500)で一定の成果を感じていました。しかし運用を続ける中で、期待した効果が得られない状況に。
そこで重要だったのが「投資したツールに固執しない」という判断です。2025年7月頃、開発者コミュニティでClaude Codeが話題になった際、すぐにプロジェクト内で検証を開始。実際に試した結果、メンバーが納得する形でClaude Codeへの移行を決断しました。
移行後は、コンポーネントの移行作業が想定より半分以下の時間で終わるなど、移行で多くの手がかかる部分をAIに頼ることができました。
重要だったのは「AIに100%を期待しない」現実的な期待値設定と、「業界トレンドをキャッチアップして最適な手段を選び直す」柔軟性の両立でした。
少人数での並行案件遂行を成功させるには、優秀なメンバー、適切なコミュニケーション、柔軟なタスク割り振り、そして最適なツールの活用—この4つの掛け算が鍵でした。どれか一つが欠けても、今回のような成果は出せなかったと思います。
おわりに:次のチャレンジへ
3年越しのNext.js移行プロジェクトが完了したことでフロントが更新しやすくなり、これからさらにプロダクト開発を加速していきます。
P50レイテンシ93%削減というプロダクトの中身の成果だけでなく、長期的な視点での技術投資を実現できる組織文化と、少人数でも複数案件を並行遂行できるチーム力を確立できたことは、チームとして大きな成長ができたと感じています。
この経験を活かし、今後もエンジニアが成長でき、ビジネスに貢献できる開発組織をめざしていきます。
最後に、このプロジェクトに関わったすべてのメンバー、そして長期的な投資を支えてくれた組織に感謝します。
