React Router v7 を選んだ話

TL;DR

Cloudflare Pagesへのデプロイを前提にReact Router v7を採用した。
React Routerをあまり分かっていなかったので、備忘録としてこの記事ではその判断過程を整理する。

背景：そもそも何を作るのか

個人開発でWebアプリを作る際、2025年末時点でのReactベースの選択肢は以下が一例としてある。

フレームワーク	主な用途
Next.js	Webアプリ全般（SSR/SSG/ISR対応）
React Native	iOS/Androidネイティブアプリ
React Router v7	Webアプリ（旧Remixと統合）

今回はWebアプリなのでReact Nativeは除外。Next.js vs React Router v7の二択となった。

判断軸の整理

まず両者の違いを整理した。

設計思想の違い

観点	Next.js	React Router v7
設計思想	フレームワーク主導、規約重視	Web標準準拠、ライブラリ寄り
データフェッチ	Server Components + fetch	loader/action（FormData中心）
ビルドツール	Turbopack / webpack	Vite
バンドルサイズ	やや大きい	軽量
エコシステム	巨大（情報量・プラグイン豊富）	成長中（Shopify支援で安定）

デプロイ先との相性

ここが決定打となった。

デプロイ先はVercelか？
├─ Yes → Next.js（最適化の恩恵が大きい）
└─ No
    ├─ Cloudflare Workers/Pages？ → React Router ✅
    ├─ セルフホスト/Docker？ → どちらでも可
    └─ 複数エッジ環境への柔軟性が必要？ → React Router

Next.jsはVercel以外の環境だと制約が生じる。特に以下の点が気になった。

• ISR（Incremental Static Regeneration） はVercel前提の機能
• Edge Runtime の挙動がVercelとCloudflareで異なる
• next/image の最適化もVercel依存が強い

一方、React Router v7（旧Remix）はCloudflareをファーストクラスでサポートしている。Shopifyが支援していることもあり、Vercel以外の環境での安定性は高い。

「迷ったらNext.js」は正しいのか

一般論として「迷ったらNext.js」というアドバイスは正しいと思う。理由は明確で、

1. 情報量の圧倒的な差 — 日本語記事、Stack Overflow、AI（ChatGPT/Claude）の学習データも多い
2. Vercel無料枠で小規模なら運用コストゼロ
3. App Router + Server Actionsでloader/action的なパターンも書ける
4. 採用市場での需要が高い（ポートフォリオ価値）

ただし、これはデプロイ先がVercel前提の場合に限る。

React Router v7を選ぶ明確な理由

今回の判断は以下の条件が揃っていたから。

1. Cloudflare Pagesにデプロイする

これが最大の理由。Cloudflareのエッジネットワークを活かしたいなら、React Router v7のほうが素直に動く。

2. Viteのビルド速度・シンプルさを優先したい

Next.jsのTurbopackも高速化しているが、Viteのシンプルさと速度は魅力的。設定ファイルも直感的。

3. フレームワークのマジックを減らしたい

Next.jsのApp Routerはキャッシュ挙動が複雑で、意図しない挙動にハマることがある。React Router v7はWeb標準（FormData、fetch）に寄せた設計で、挙動が予測しやすい。

4. 既存のReact知識がそのまま使える

Server Componentsの新しいメンタルモデルを学ぶより、従来のReactパターンで書きたかった。

まとめ

条件	選択
Vercelにデプロイ、情報量重視	Next.js
Cloudflare中心、Vite好き、Web標準志向	React Router v7
ネイティブアプリが必要	React Native

「どこにデプロイするか」を最初に決めれば、選択は自ずと絞られる。

個人開発でCloudflareを選ぶ理由があるなら（無料枠の太さ、エッジの速さ、Workers KVやD1との連携など）、React Router v7は有力な選択肢になる。