個人開発で Next.js と React Native を両方使ってみた技術比較
はじめに
Java2年目のエンジニアです。個人開発で2つのサービスを運営しています。
- DescriAI: AIが商品説明文を自動生成するWebサービス（Next.js）
- FukuMemo: 副業の収入を管理するモバイルアプリ（React Native）
どちらもTypeScript + Supabaseという共通基盤を持ちながら、Web とモバイルで技術選定が大きく異なりました。本記事では、両方を開発した実体験をもとに技術比較をまとめます。
技術スタック比較
| 項目 | DescriAI（Web） | FukuMemo（Mobile） |
|---|---|---|
| フレームワーク | Next.js 16 (App Router) | React Native + Expo SDK 52 |
| BaaS | Supabase | Supabase |
| 認証 | Supabase Auth (Web) | Supabase Auth (Mobile) |
| 課金 | Stripe | RevenueCat |
| AI | Claude Haiku API | - |
| デプロイ | Vercel | EAS Build |
| 言語 | TypeScript | TypeScript |
認証：Supabase Auth の Web vs Mobile
Supabase Authは両方で使えますが、実装に差があります。
Web（Next.js） では @supabase/ssr を利用し、Server ComponentsやMiddlewareでセッションを管理します。cookieベースのため、サーバーサイドでの認証チェックが自然に書けます。
Mobile（React Native） では @supabase/supabase-js に AsyncStorage をアダプタとして渡します。DeepLinkを使ったOAuth設定が必要で、expo-auth-sessionとの連携に手間がかかりました。特にリダイレクトURLのスキーマ設定でハマる場面が多かったです。
課金：Stripe vs RevenueCat
| 観点 | Stripe（Web） | RevenueCat（Mobile） |
|---|---|---|
| 導入難易度 | Webhook設定がやや複雑 | SDKが抽象化してくれて楽 |
| 手数料 | 3.6% | Apple/Google 15〜30% + RevenueCat |
| サブスク管理 | 自前でステータス管理が必要 | ダッシュボードで一元管理 |
| テスト | Stripe CLIでローカルテスト可 | Sandboxテストにやや時間がかかる |
Webは手数料が圧倒的に安いですが、Webhook処理を自分で書く必要があります。RevenueCatはストアの複雑な課金ロジックをラップしてくれるので、モバイル課金の入門としては最適でした。
デプロイ：Vercel vs EAS Build
Vercel は git push だけでデプロイが完了します。プレビュー環境も自動生成されるため、個人開発との相性は抜群です。
EAS Build はビルド待ち時間が長い（無料プランで15〜20分）のがネックです。さらにApp Store / Google Play の審査が加わるため、リリースまでのリードタイムはWebと比較になりません。OTAアップデート（EAS Update）を活用して、JSバンドルだけの更新はストア審査なしで反映するのが運用のコツです。
開発体験の違い
| 観点 | Next.js | React Native (Expo) |
|---|---|---|
| ホットリロード | 高速・安定 | やや不安定な場面あり |
| デバッグ | ブラウザDevToolsが強力 | Expo DevTools + 実機確認が必要 |
| スタイリング | CSS / Tailwind CSS | StyleSheet（Flexboxのみ） |
| 環境構築 | ほぼゼロコンフィグ | Xcode / Android Studio が必要な場面も |
React Nativeは実機での動作確認が前提となるため、開発サイクルがWebより少し長くなります。一方で、Expo SDK 52のNew Architectureサポートにより、パフォーマンスは大きく改善されていると感じました。
どちらを選ぶべきか
- 素早くリリースして検証したい → Next.js（Web）
- ユーザーの日常に入り込みたい → React Native（Mobile）
- 収益化の手数料を抑えたい → Web + Stripe
- ネイティブ機能（通知・カメラ等）が必要 → React Native
個人開発では「最初にWebでMVP検証→反応が良ければモバイル化」という流れが効率的だと感じています。
まとめ
TypeScript + Supabase を共通基盤にすることで、WebとMobileの両方を一人で開発・運用できています。どちらにも長所と短所があるので、サービスの特性に合わせて選ぶのが重要です。
個人開発で挑戦してみたい方の参考になれば幸いです。
DescriAI（AI商品説明文ジェネレーター）
https://descri-ai.vercel.app
各種リンクはこちら
https://lit.link/shotani__