Closed2
React+Vite+Tanstack Router 構成をNext.js+App Router に移行してみる
![Tasuku Kawahara](https://res.cloudinary.com/zenn/image/fetch/s--GL3ND15d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2930a38784.jpeg)
まずは既存構成
- Turborepo を使った monorepo 構成
- React + Vite のフロントエンド
- Routing は Tanstack Router
- API 呼び出しは RTK Query (Tanstack Router を採用しておいてなぜ React Router ではないのかは触れない)
- NestJS のバックエンド
React + Vite の SPA をNext.js に移行したい。
NestJSのBFFはとりあえずそのままにする。
せっかくMonorepoを採用しているんだし、新しく Next.js プロジェクトを追加して、式年遷宮方式で移行する。
共通部分はすべて package に切り出して、Page + Router の部分をそれぞれで持っておき、ViteとNextどちらのビルドも使えるようにする。
![Tasuku Kawahara](https://res.cloudinary.com/zenn/image/fetch/s--GL3ND15d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/2930a38784.jpeg)
Tanstack Router と App Router の比較をしたい
このスクラップは13日前にクローズされました