Next.js App Router から複数バックエンドを扱うための BFF + クリーンアーキテクチャ戦略

ARANK

どうも、トラハックこと、toraco株式会社の稲垣です。複数のバックエンドを抱えるプロダクトにおいて、Next.js ( App Router ) 製 の Web アプリケーションを新規開発するにあたり、Route Handlers による BFF とクリーンアーキテクチャを取り入れることで、バックエンドに依存しないクライアント実装を実現しました。将来的に、通信するバックエンドが増えたり、バックエンドのアーキテクチャが変更になったとしても、クライアントの実装に修正を加えることなく移行が可能です。余談ですが、一般的な設計や実装に関しては技術記事を読まなくても生成AIに任せることができてしまう現代になっているように思います。（それが "問題ない" のかは議論の余地がありますが...）なので、この記事では以下の観点を重要視して書いていきます。アーキテクチャ選定や設計段階で考えていること（思考プロセス）具体的なユースケースに沿った実装例ポジショントーク（他にも選択肢がある中でなぜその選択をしたのかという想い）前提弊社が4年近く開発をサポートさせていただいてるお客様から「モバイルアプリ版に加えてブラウザ版をリリースしたい」というご要望をいただいたことが事の…