巨大な Next.js アプリケーションを垂直分割してマイクロフロントエンド化した話 - エス・エム・エス エンジニア テックブログ

はじめに こんにちは！カイポケコネクトの開発推進チームでエンジニアをしている @_kimuson です。主にフロントエンドを中心に開発生産性の向上に取り組んでいます。 今回は、カイポケコネクトのフロントエンドを単一のNext.js構成からマイクロフロントエンド化した話を紹介します。 スパンで言うと提案をしてから9か月ほど経っているのですが、ようやく形になってきたので方針や試行錯誤した知見を共有できればと思います。 背景・元々のアーキテクチャ まず、元々の構成を簡単に説明しておきます。 カイポケコネクトのフロントエンドは、GraphQL Federation*1 を行うBFF*2 Serverに対して巨大なフロントエンドが建っている構造です。 Next.jsを使っていますが、SSR*3 は行わず静的な構成です。Pages RouterでStatic Buildした成果物をS3でホスティングす