この記事は、モバイルクライアントを本格的に受け入れ始めたときに欲しかったガイドです。エンジニアリングの現実、ビジネス経済、必要なデプロイパイプラインについてカバーしています。「シナジー」についての手振り議論ではなく、本番アプリをデリバリーしたときに実際に得られた教訓です。

目次

React Native for Web Agencies: Adding Mobile to Your Next.js Practice in 2026

2026年がウェブエージェンシーがモバイルに進出する適切な時期である理由

タイミングの議論は単なる市場規模についてではありません。3つの特定のシフトが収束したことについてです：

**React Nativeの新しいアーキテクチャは安定しています。**数年間「近日公開予定」だったFabricレンダラーとTurboModulesは今やデフォルトです。React NativeとネイティブSwift/Kotlinの間のパフォーマンスギャップはアプリカテゴリの90%でほぼ無関係なレベルに縮小しました。JSI（JavaScript Interface）は、すべてのネイティブ呼び出しでブリッジをクロスする必要がないということです — それは同期的で高速です。

**Expoは完全なプラットフォームになりました。**Expo SDK 53（2026年初頭リリース）は事実上すべてのネイティブAPIをサポートしています。Bluetoothやバックグラウンドロケーションなどの基本的な機能のためにExpoをejectする日々は終わりました。EAS Buildはコンパイルパイプライン全体を処理します。ほとんどのプロジェクトではマシンにXcodeを必要としません。

**クライアント需要がシフトしました。**私たちのネットワーク内のエージェンシーで特定のパターンが見られます。かつて「ウェブサイト」を求めていたクライアントが今「デジタル製品」を求めています。彼らはウェブプレゼンスとモバイルアプリの両方を期待し、デザインシステムを共有することを期待しています。両方を1つのチームから提供できれば、あなたは別々のウェブショップとモバイルショップと競争していません — あなたはそれら両方を置き換えています。

市場数値

Statistaの2025年データによると、グローバルモバイルアプリ収益は2027年までに1.1兆ドルに達すると予測されています。しかし、エージェンシーにより関連性があるのは：平均的なエンタープライズクライアントのモバイルアプリ予算は2025-2026年にMVPの場合150,000ドル～500,000ドルです。それはほとんどのエージェンシーウェブプロジェクトが要求する額の2～3倍です。

Reactエコシステムの重複：実際に転用できるもの

まず神話を打ち砕きましょう：React Nativeは「単にReact for phones」ではありません。あなたの開発者は学習曲線を持つでしょう。しかし、SwiftとKotlinをゼロから学ぶ場合よりもはるかに短い曲線です。

React Nativeに転用できるものと転用できないものの正直な内訳があります：

スキル/テクノロジー React Nativeに転用できますか？ 注釈
Reactコンポーネントパターン ✅ はい、直接 Hooks、context、状態管理 — すべて同じ
TypeScript ✅ はい、直接 同じ言語、同じツーリング
状態管理（Zustand、Jotai、Redux） ✅ はい、直接 ドロップイン互換
React Query / TanStack Query ✅ はい、直接 同じAPI、同じキャッシング戦略
CSS / Tailwind ⚠️ 部分的 CSSカスケードなし。NativeWindがギャップを埋めます
Next.jsルーティング ⚠️ 部分的 Expo Routerもファイルベースですが、ナビゲーションパラダイムが異なります
DOM操作 ❌ いいえ DOMはありません。ピリオド。
HTML要素 ❌ いいえ <View>、<Text>、<Pressable>の代わりに
ブラウザAPI ❌ いいえ Expoモジュールまたはネイティブモジュールが必要
CSSアニメーション ❌ いいえ Reanimated 3を使用（実際にはより優れています）

スイートスポットはこれです：あなたのReact開発者は2～3週間以内にReact Nativeで生産的になることができます。彼らは専門家ではありませんが、機能をデリバリーできます。これはネイティブ開発者を雇う場合と比較して大きなアドバンテージです。

最も驚いたこと

メンタルモデルがよりよく転用されると予想していたのは驚きでした。Reactのコンポーネント合成、単一方向データフロー、および宣言的UIパラダイム — これらは学習するのが難しい部分です。API表面の違い（<div>対<View>）は比較的簡単です。

予想よりもレイアウトがうまく転用されませんでした。はい、React NativeはFlexboxを使用しています。しかし、flexDirection: 'column'がデフォルト、display: gridがない、メディアクエリがない（代わりにuseWindowDimensionsを使用）、スタイルのカスケードがない。チーム内のすべての開発者が最初の週はこれでつまずきました。

2026年のExpo：すべてを変えたプラットフォーム

2019-2020年にReact Nativeを試したがやめたなら、私は理解します。開発者体験は厳しかったです。Expoはこれを根本的に変えました。

2026年にExpoが提供するものはここにあります：

  • Expo Router v4：Next.jsの慣例を反映するファイルベースのルーティング。開発者はすぐに家にいるように感じるでしょう。
  • Expo Modules API：Swift/KotlinでネイティブモジュールをクリーンなTypeScript インターフェースで書きます。ジャンキーなブリッジコードはもう不要です。
  • EAS Build：iOSとAndroidのクラウドベースビルド。ほとんどのiOSビルドではMacは不要です。
  • EAS Submit：自動化されたApp StoreおよびPlay Store提出。
  • EAS Update：アプリストア審査をバイパスするOTA更新（JS専用の変更の場合）。
  • Expo Dev Client：ネイティブモジュールを含むがダッシュボード高速リフレッシュDXを維持するカスタム開発ビルド。
# 2026年で新しいExpoプロジェクトを作成
npx create-expo-app@latest my-app --template tabs
cd my-app
npx expo start

これだけです。2分以内にiOSシミュレーターとAndroidエミュレーター（またはExpo Goを使用した物理デバイス）で実行しています。

Expo Router：Next.jsからのブリッジ

Expo Routerは特別な注目に値します。Next.js開発者が迅速に適応する最大の単一の理由だからです。構造を見てください：

app/
  (tabs)/
    index.tsx        # ホームタブ
    settings.tsx     # 設定タブ
    _layout.tsx      # タブレイアウト
  profile/
    [id].tsx         # 動的ルート
  _layout.tsx        # ルートレイアウト

Next.js App Routerを使用して構築している場合、この構造はほぼ同じです。動的ルート、レイアウト、ネストされたナビゲーション — 概念は直接マップします。主な違いは、モバイルナビゲーションはページとURLパスではなくスタックとタブを使用しますが、Expo Routerはこれを美しく抽象化します。

React Native for Web Agencies: Adding Mobile to Your Next.js Practice in 2026 - architecture

Next.jsとReact Nativeの間でコードを共有する

ここはエージェンシーが本当のROIを得るところです。ウェブとモバイルの間でコードを共有することは、単に素晴らしいというわけではありません — 両方のサービスを提供するための経済的正当性です。

何を共有するか

積極的に共有：

  • ビジネスロジックとユーティリティ
  • APIクライアントとデータフェッチングフック
  • 状態管理ストア
  • 型定義と検証スキーマ（Zodはここで素晴らしく機能します）
  • 認証ロジック

慎重に共有：

  • デザイントークン（色、スペーシング、タイポグラフィスケール）
  • コンポーネントロジック（ただしコンポーネントレンダリングではない）

共有しないでください：

  • UIコンポーネント直接（レンダリングプリミティブが異なります）
  • ナビゲーションロジック
  • プラットフォーム固有のアニメーション

モノレポセットアップ

2026年の標準的なアプローチはTurborepoまたはNxモノレポです。ここは典型的な構造です：

packages/
  shared/
    src/
      hooks/
        useAuth.ts
        useProducts.ts
      utils/
        formatCurrency.ts
        validateEmail.ts
      types/
        user.ts
        product.ts
      api/
        client.ts
apps/
  web/          # Next.jsアプリ
  mobile/       # Expoアプリ

// packages/shared/src/hooks/useProducts.ts
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../api/client';
import type { Product } from '../types/product';

export function useProducts(categoryId: string) {
  return useQuery<Product[]>({
    queryKey: ['products', categoryId],
    queryFn: () => apiClient.get(`/products?category=${categoryId}`),
    staleTime: 5 * 60 * 1000,
  });
}

このフックはNext.jsアプリとReact Nativeアプリで同じように機能します。データフェッチング、キャッシング、および状態管理は完全に共有されます。異なるのはこれらのプロダクトをレンダリングするUIレイヤーだけです。

Solito / ユニバーサルアプローチ

Next.jsとExpo間でコード共有をさらに押し進めたいエージェンシーの場合、Solito（Fernando Rojoによる）はユニバーサルナビゲーションと一部の共有コンポーネントをNext.jsとExpoの間で有効にします。2026年では、React Nativeのreact-native-webライブラリも設計システム共有に十分に成熟していますが、少なくとも1つのReact Nativeプロジェクトをデリバリーしているチームにのみこれをお勧めします。複雑さを増します。

私たちの典型的なコード共有の割合：総コードベースの40～60% がウェブとモバイル間で共有されます。これはマーケティング誇張ではなく — これは6つのクライアントプロジェクトにわたって測定されています。

EAS BuildとデプロイメントCI/CDパイプライン

デプロイメントは、モバイル開発が歴史的に苦痛だったところです。アプリ署名、プロビジョニングプロファイル、Play Storeコンプライアンス — それは迷路です。EASはそれを管理可能にします。

EASビルド価格（2026）

プラン 価格 ビルドクレジット/月 ビルド速度
無料 $0 iOS 30 + Android 30 ビルドあたり約40分
本番環境 $99/月 合計200 ビルドあたり約15分
エンタープライズ $999/月 無制限 ビルドあたり約8分（優先）

ほとんどのエージェンシーにとって、本番環境プランはスイートスポットです。複数のアクティブプロジェクトがあると無料ティアクレジットはすぐに使い切られます。

実際のCI/CDパイプライン

ここは複数のクライアントプロジェクトに渡ってうまく機能しているパイプラインで、それを使用しています：

# .github/workflows/mobile-deploy.yml
name: Mobile Deploy
on:
  push:
    branches: [main]
    paths:
      - 'apps/mobile/**'
      - 'packages/shared/**'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx eas-cli build --platform all --non-interactive --profile production
        env:
          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

  submit:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx eas-cli submit --platform all --non-interactive
        env:
          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

ネイティブコードに触れないJavaScript専用の更新の場合、フルビルドの代わりにEAS Updateを使用します：

# OTA更新をプッシュ — ユーザーは次回のアプリ起動時にそれを取得します
eas update --branch production --message "チェックアウトボタンの配置を修正"

これはエージェンシーにとって巨大です。App Store審査を待つのに1～3日かかる可能性があるバグ修正は、ユーザーに数分で到達します。

エージェンシーの経済学：価格設定、スタッフ配置、マージン

お金について話しましょう。ここはエージェンシーが最大の間違いをしているのを見ます。

モバイルプロジェクトの価格設定

モバイルプロジェクトをウェブプロジェクトのように価格設定しないでください。構築がより高価で、保守がより高価で、進行中のプラットフォームコストが来ます。ここはうまく機能しているのを見てきました：

プロジェクトの種類 典型的なエージェンシーレート 期間 合計範囲
シンプルアプリ（コンテンツ、認証、基本的なCRUD） $180-250/時間 8～12週間 $90,000～$180,000
中型アプリ（支払い、リアルタイム、統合） $180-250/時間 12～20週間 $180,000～$400,000
複雑なアプリ（オフライン対応、重いネイティブ機能） $200-300/時間 20～32週間 $350,000～$750,000
ウェブ+モバイルバンドル（共有コードベース） $180-250/時間 16～28週間 $250,000～$550,000

ウェブ+モバイルバンドルはあなたの競争上の武器です。$350Kで両方を得ているクライアントは別々のショップにウェブに$200Kを支払い、モバイルに$300Kを支払っているより良い取引をしています。あなたのマージンはコード共有のため改善されています。

スタッフ配置モデル

すぐに専用のモバイル開発者を雇う必要はありません。ここはうまく機能する進行です：

  1. フェーズ1（最初のモバイルプロジェクト）：シニアReact開発者がリード、React Nativeの経験のあるコントラクターがガイドとして。コントラクターに$15,000～$25,000を予算に入れます。
  2. フェーズ2（2～3プロジェクト）：チームはスキルを十分に持っています。モバイルリードとして強いReact Nativeの背景を持つ1人の開発者を雇います。
  3. フェーズ3（モバイルは収益の30%以上）：2～3人の開発者のモバイルポッドを構築します。

メンテナンス収益ストリーム

モバイルについて誰も言わないことはここにあります：クライアントが機能を追加していない場合でも、継続的なメンテナンスが必要です。iOSとAndroidは毎年メジャーOSバージョンをリリースします。依存関係が更新が必要です。App Storeポリシーが変わります。これは定期的な収益です。

アプリの複雑さに応じて、モバイルアプリメンテナンス定期契約に対して月$3,000～$8,000を請求します。8～10クライアント全体で、これはプロジェクトベースの収入の変動を平滑化する意味のある定期的な収益です。

モバイルクライアントにYesと言うとき（そしてNo）

すべてのモバイルプロジェクトがあなたのエージェンシーに適しているわけではありません。私はこれを難しい方法で学びました。

Yesと言う場合：

  • クライアントが既にあなたが構築したウェブ製品を持っている — ドメイン、API、ビジネスロジックを知っています。初日の前に40%完了しています。
  • アプリは主にデータドリブン — CRUDアプリ、ダッシュボード、e-commerce、コンテンツ配信。React Nativeはここで優れています。
  • クライアントは現実的なタイムラインを持っています — 意味のあるものには最小8週間。
  • 予算は$80,000以上 — 下記では、品質を提供してマージンを維持することはできません。

Noと言う場合：

  • アプリは重いGPU/グラフィックスが必要 — ゲーム、AR体験、複雑な3D。Unityまたはネイティブを使用します。
  • アプリは深いハードウェア統合が必要 — Bluetooth LEペリフェラル、カスタムカメラパイプライン、NFC支払い処理。React Nativeでは可能ですが、ネイティブモジュール開発がバジェットを吹き飛ばすでしょう。
  • クライアントは「ピクセルパーフェクトなプラットフォームネイティブ」デザインを望んでいる — iOSアプリがSwiftUIアプリのように感じ、AndroidアプリがJetpack Composeのように感じることを望む場合、React Nativeはオーバーヘッドを追加します。
  • 予算は$50,000未満 — 金を失うでしょう。フリーランサーまたはノーコードプラットフォームに紹介してください。
  • クライアントはAPIを持っていない — バックエンド、モバイルアプリ、ウェブアプリを構築する必要がある場合、スコープを注意深く調査してください。これは1つのプロジェクトではなく3つです。

エンジニアリングコスト：誰も話さない数字

開発者給与を超えて、モバイルはウェブエージェンシーが考えないコストを追加します：

コスト 年間金額 注釈
Apple開発者アカウント クライアント当たり年$99 App Storeに必要
Google Play開発者アカウント クライアント当たり1回限り$25 Play Storeに必要
EAS Build（本番環境） 年$1,188 プロジェクト全体で共有
App Storeスクリーンショット＆アセット アプリ当たり$500-2,000 スコーピングで忘れることが多い
デバイステスティングラボ 年$2,000-5,000 物理デバイスまたはBrowserStack
プッシュ通知サービス $0-500/月 Firebaseは開始時は無料、スケールアップ
コード署名証明書 Apple開発者アカウントに含まれます しかし、それらの管理は時間がかかります
App Store最適化 起動当たり$500-2,000 クライアント向けでこれを行う場合

滑りやすいコストは実デバイスのテストです。シミュレータは嘘をつきます。私たちは6つのiPhone（様々なモデル）と4つのAndroidデバイス（Samsung、Pixel、パフォーマンステスト用の安い電話）でデバイスラボを維持しています。これのために予算を立てます。

時間コスト

App Storeレビューは通常24～48時間ですが、祝日期間中は1週間かかる場合があります。Play Storeレビューは通常より高速（数時間～1日）です。これをプロジェクトタイムラインで説明してください — ウェブアプリのようにあなたは「金曜日にデプロイ」することはできません。

最初のアプリサブミッションにはより長い時間がかかります。Appleは特に新しい開発者アカウントを精査します。我々は最初の提出が5～7日かかり、却下と再提出のサイクルを見てきました。

ウェブエージェンシーの実践的な移行パス

モバイルをプラクティスに追加するのに確信が持てるなら、ここは推奨するパスです：

月1-2：内部プロジェクト Expoを使用して簡単な内部アプリを構築します。タイムトラッカー、プロジェクトダッシュボード、何でも。クライアント圧力なしにツーリングに精通させてください。これを使ってモノレポ構造、CI/CDパイプライン、デバイステストプロセスをセットアップします。

月3-4：既存クライアントアップセル あなたの最高の既存クライアントにモバイルコンパニオンアプリについてアプローチします。ドメイン、API、チームを既に知っています。参考ケースと交換に軽い割引でそれを提供してください。

月5-8：最初の外部モバイルクライアント 現実的なスコープを持つモバイルプロジェクトを受け入れます。最大12週間に保つ。内部プロジェクトと最初のクライアントプロジェクトを能力の証明として使用します。

月9以降：製品化 標準モバイルプロジェクトテンプレート、見積もりスプレッドシート、オンボーディングプロセスを作成します。これはモバイルが実験ではなく実際のサービスラインになるときです。

このプロセス全体を通して、ヘッドレスCMS能力に投資してください — ウェブと同じCMSからプルするコンテンツ駆動モバイルアプリは提供できる最高価値のバンドルの1つです。

テック スタック推奨事項

2026年に開始するエージェンシーの場合、ここはベットしたいスタックです：

  • Expo SDK 53+ Expo Router v4を使用
  • NativeWind v4 スタイル設定用（React Native用Tailwind CSS）
  • TanStack Query サーバー状態用
  • Zustand クライアント状態用
  • React Native Reanimated 3 アニメーション用
  • Turborepo モノレポ管理用
  • EAS Build + EAS Update CI/CD用

ウェブプラクティスが代わりにAstroを使用する場合、共有コード戦略はまだ機能します — あなたはReactコンポーネントではなくデータレイヤーとビジネスロジックパッケージを共有しています。

FAQ

React/Next.js開発者がReact Nativeで生産的になるのにどのくらい時間がかかりますか？

5人のウェブ開発者をオンボーディングした経験に基づいて、基本的な生産性（スクリーンを構築でき、機能を実装できる）までに2～3週間、自信を持った独立した（機能を構築でき、ネイティブの問題をデバッグでき、プラットフォーム固有のエッジケースを処理できる）と言えるものまでに2～3か月の期待をしてください。初期学習曲線は主にナビゲーションパターン、モバイル固有のUX慣例、スタイリング差について。

Next.jsとReact Nativeで同じコンポーネントを使用できますか？

直接ではありません — レンダリングプリミティブが異なります（<div>対<View>、<span>対<Text>）。しかし、カスタムフックを通じてコンポーネントロジックを共有でき、デザイントークンを共有でき、Solitoやreact-native-webなどのライブラリを使用してギャップをブリッジできます。実際には、プラットフォーム間の総コードの40～60%を共有し、主にビジネスロジックとデータレイヤーコード。

React Nativeアプリを毎年維持するのにいくらかかりますか？

典型的な中程度の複雑さのアプリでは、年$36,000-$96,000のメンテナンスコストを期待してください。これはOS互換性の更新（iOSとAndroidは毎年メジャーバージョンをリリース）、依存関係の更新、バグ修正、小さな機能追加、App Storeポリシーコンプライアンスをカバーします。これはクライアントが予算立てする必要のある実際のコストです。

React Native は2026年の本番アプリ向けに十分な高速ですか？

はい、明確に。New Architecture（Fabric + TurboModules + JSI）が今やデフォルトで、React Nativeアプリは標準UIで60fps一貫して達成します。Discord、Shopify Shop、CoinbaseなどのアプリはスケーリングでReact Nativeを使用しています。ネイティブとのパフォーマンスギャップはアプリカテゴリの90%以上では無視できます。それがまだ遅れているのは重いアニメーションまたはGPU集約的なワークロードです。

ExpoかベアReact Nativeを使用すべきですか？

Expo。これは2026年でも議論の余地がありません。Expoは事実上すべてのネイティブAPIをサポートし、Expo Modules APIは必要なときにカスタムネイティブコードを書くことができ、EAS Buildはネイティブツールチェーンの悪夢を排除します。「Xが必要な場合Expoから ejectする」という古いアドバイスは時代遅れです。本番React Nativeアプリの約85-90%は今Expoを使用し、主要なアプリを含めます。

モバイルプロジェクトの最小実行可能なチームは何ですか？

2人の開発者とモバイル慣例を理解するデザイナー。1人の開発者はReact Native経験を持つべき（内部トレーニングプロジェクトでも）。そこからスケールアップできますが、クライアントモバイルプロジェクトで一人で行くのはリスキーです — 多くのプラットフォーム固有の知識が必要です。最初のプロジェクトの場合、安全ネットとしてパートタイムReact Nativeコントラクターを考慮してください。

App Store提出とレビューを処理するのはどのようにですか？

EAS Submitはバイナリアップロード処理を自動化します。しかし、メタデータ、スクリーンショット、プライバシー宣言、レビュー応答をApp Store ConnectおよびGoogle Play Consoleで手動で管理する必要があります。Appleのレビュー処理は通常24～48時間かかります。潜在的な却下のため最初のサブミッションに1～2週間を予算に入れてください。一般的な却下理由：プライバシーポリシー、不十分なログイン機能、不完全なメタデータなし。

開発者が5～10人しかいない場合、モバイル開発を提供する価値がありますか？

絶対に — これは実は開始するのに理想的なサイズです。最初の日からの専用モバイルチームは不要です。2～3人の最強Reactの開発者をトレーニングして開始し、1回に1つのモバイルプロジェクトを引き受け、そこから成長します。ウェブとモバイル間でのコード共有は、チームが分割されないということ — プラットフォーム全体で共有ファウンデーション。に渡って作業しています。価格設定ページをご確認いただくか、直接お問い合わせください同様のサイズの他のエージェンシーがこの移行を行った方法について議論したい場合。