個人開発で 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__