100 以上のレガシーページを React と Next.js へ移行

課題

Traveloka の宿泊パートナー向けプロダクト（TERA）の一部は、Apache Velocity で作られたレガシーなモノリスで動いていました。目標は、プロダクト開発を止めずに、モダンな React と Next.js のフロントエンドスタックへ移すことでした。

アプローチ

• 一度にではなく段階的に移行する。 移行戦略は私が担当しました。プロダクトのリリースを続けながら、ページを 1 つずつ React と Next.js のリポジトリへ移しました。
• 先にパターンを決める。 移行のアーキテクチャ、再利用できるパターン、技術標準を本格的な作業の前に合意し、ページごとに一から作らずに済むようにしました。
• チームをまたいで調整する。 実装と展開は複数のチームで分担し、ページごとの担当を明確にして、元のページと同等であることを一貫した方法で確認しました。

Traveloka に入って間もない頃、私はすでに 11 ページ（約 35 人週分の作業）をモノリスから Front-End Web のリポジトリへ移しており、それがこの大きな取り組みの最初の一歩でした。

結果

プラットフォーム全体を書き直すことなく、そのリスクも負わずに、100 以上のレガシーページを React と Next.js へ刷新しました。