Tasuku Kawahara

まずは既存構成
<ul>
<li>Turborepo を使った monorepo 構成</li>
<li>React + Vite のフロントエンド
<ul>
<li>Routing は Tanstack Router</li>
<li>API 呼び出しは RTK Query (Tanstack Router を採用しておいてなぜ React Router ではないのかは触れない）</li>
</ul>
</li>
<li>NestJS のバックエンド</li>
</ul>
React + Vite の SPA をNext.js に移行したい。 
NestJSのBFFはとりあえずそのままにする。
せっかくMonorepoを採用しているんだし、新しく Next.js プロジェクトを追加して、式年遷宮方式で移行する。 
共通部分はすべて package に切り出して、Page + Router の部分をそれぞれで持っておき、ViteとNextどちらのビルドも使えるようにする。
<img alt="構成概略図" loading="lazy" class="md-img">

Tanstack Router と App Router の比較をしたい

React+Vite+Tanstack Router 構成をNext.js+App Router に移行してみる