CMS を React & Next.js で再構築

2023 年に私がこの移行を提案・主導し、マイクロフロントエンド（iframe）と Next.js App Router のアーキテクチャの導入を決定して、PHP ベースの LINE Shopping CMS を React & Next.js App Router のアーキテクチャへリファクタリングするようチームを率いました。チームメンバーは計 4 人です。実際の開発に加え、技術選定、社内研修、スケジュール策定、タスクの割り振り、リスク評価なども担当しました。LINE Taiwan で実際に Next.js App Router を採用し始めた数少ない初期プロジェクトの 1 つでもあります。

推進の経緯（技術チームに新方式の採用を説得）

背景：旧システムは PHP バックエンドとテンプレート言語を組み合わせた構成でした。社内の PHP バックエンドエンジニアは 1 人しかおらず、システムを更新するたびに大きな障壁があり、フロントエンドもなかなかうまく書けない状態が続いていました。

目標：システム全体をフロントエンドとバックエンドに分離し、当時まだ新しかった Next.js App Router をフロントエンドのフレームワークとして導入すること。今後のシステム改修は専任のフロントエンドチームが担い、PHP バックエンドエンジニアはすっきりしたバックエンドだけを担当する体制を目指しました。

課題：移行は一度にリリースして完了できるものではなく、上長からはダウンタイムを出さないこと、そして障害復旧ができることを求められました。また、フロントエンドのメンバーは多くが Vue を専門としており、Next.js にはやや抵抗感を持っていました。

アクション：Next.js の勉強会を何度も主催し、Next.js App Router の利点を一つずつデモで示しました。同時に iframe ベースのマイクロフロントエンドアーキテクチャを設計し、オンラインの feature toggle によって、新しいページに問題があればデプロイや修正を行わずに、すぐ旧ページへ切り戻せるようにしました。

結果：この方式で上長の懸念を解消して支持を得られ、メンバーも Next.js を知るにつれてプロジェクトの完遂に協力してくれるようになりました。メインプロジェクトの開発に影響しない空き時間を活用し、約 1 年かけて旧システムを段階的に新アーキテクチャへ移行しました。完了後は PHP のフロントエンドコードを正式に廃止し、新機能の開発では通常どおりフロントエンドとバックエンドで分業できるようになり、開発時間を平均 30% 削減。PHP の保守体制も人手不足から十分な状態へと改善しました。