「Next.js でネイティブアプリを作りたい」というとき、選択肢は複数あり、しかも根っこの作りが違います。違いの軸は1つ——画面の“中身”が何かです。Web（WebView）なのか、本物のネイティブ UI 部品なのか、それとも独自エンジンの描画なのか。ここを押さえると、Capacitor・Socket Runtime・React Native/Expo・Flutter の位置関係がすっきり見えます。
先に、紛らわしい点を1つ。Vercel 自身も「Next Native」を予告していますが、それはモバイルアプリではなく、Next.js のサーバー側を Go などネイティブ言語で動かす方向性です（詳細は別記事Next Nativeとは｜Next.jsがGoのRoute Handlerをネイティブ実行する実験）。本記事が扱う“モバイルアプリ化”で名前が近い実在物は、有料テンプレの nextnative.dev と MIT OSS の socketsupply/next-native（後述）で、どちらも Vercel 製ではありません。AI コーディング全般の土台はVibe Codingとは？AIコーディングの始め方・ツール比較・実践ワークフロー2026、ターミナル系の開発体験はAiderとは？ターミナルAIペアプロの使い方と現在地も参考になります。この記事は、各方式の仕組み・違い・選び方を、各ランタイムの公式と実測で整理します。
THREE APPROACHES画面の実体で3つ
画面の中身が何かで、やり方が分かれる
-
A
WebView ハイブリッド（Next.js を“包む”）
OS の WebView の中で Web アプリを動かす。端末機能はプラグイン経由。Capacitor/Ionic・Socket Runtime・Tauri。Next.js の資産をそのまま使える
-
B
ネイティブ UI（React Native / Expo）
JS が“本物のネイティブ部品”を動かす。WebView ではない。Next.js の Web UI はそのまま使えず作り替え（ロジックは Solito 等で共有）
-
C
独自描画（Flutter）
Dart＋自前の描画エンジンが全画面を描く。WebView でもネイティブ部品でもない。Next.js とは別スタック
-
要点
“Next.js をそのまま”なら A
Next.js はもともと Web。コードを流用してネイティブ化したいなら A（WebView ハイブリッド）。B/C は別の作り方への乗り換え
30秒でわかる
- ・違いの軸は「画面の中身が何か」。WebView ハイブリッド／ネイティブ UI／独自描画の3つに分かれる。
- ・Next.js をそのまま活かすなら WebView ハイブリッド（Capacitor/Ionic・Socket Runtime・Tauri）。Web の資産とスキルを流用できる。
- ・ネイティブの操作感重視なら React Native/Expo（本物のネイティブ部品）、描画を完全統一なら Flutter（独自エンジン・Dart）。
- ・モバイルの「next native」（nextnative.dev＝有料 Capacitor テンプレ、socketsupply/next-native＝star 10・2024年5月以降停滞の OSS）はどちらも Vercel 製ではない。Vercel 自身の「Next Native」は別物（サーバーのネイティブ言語）。
画面の実体で3つに分かれる
Next.js はもともとWeb のフレームワークです。だから「ネイティブ化」とは、その Web アプリをどう端末上のアプリにするか、という話になります。方式は画面の実体で3つに割れます。
WEBVIEW VS NATIVE UI中身の違い
WebView の中の Webか、本物のネイティブ部品か
WebView ハイブリッド（A）
ネイティブ UI / 独自描画（B・C）
WebView ハイブリッド（A）: 画面は HTML/CSS/JS（Next.js・Ionic 等）
ネイティブ UI / 独自描画（B・C）: 画面はネイティブ部品（B）または自前描画（C）
WebView ハイブリッド（A）: Web の知識・コードを流用できる
ネイティブ UI / 独自描画（B・C）: 新しい作法・UI を学び、基本は作り替え
WebView ハイブリッド（A）: 重い UI や細かな操作感は WebView の制約を受けうる
ネイティブ UI / 独自描画（B・C）: ネイティブの操作感・性能を出しやすい
A. WebView ハイブリッド（Next.js を“包む”）：OS に内蔵の WebView の中で、Web アプリ（Next.js の画面）をそのまま動かします。カメラや位置情報などの端末機能は、プラグイン経由で JS から呼びます。Capacitor（＋Ionic）、Socket Runtime、Tauri がこの系統です。Next.js の資産とスキルをそのまま使えるのが最大の利点です。
B. ネイティブ UI（React Native / Expo）：JS が WebView ではなく、本物のネイティブ UI 部品（iOS/Android のボタンやリスト）を動かします。見た目も操作感もネイティブですが、Next.js の Web 画面はそのまま使えず作り替えになります（後述の Solito でロジックは共有できます）。
C. 独自描画（Flutter）：Dart と自前の描画エンジンが、全画面を自分で描きます。WebView でもネイティブ部品でもなく、独自のキャンバス。プラットフォーム間で見た目を完全にそろえやすい反面、Next.js とは別スタックです。
WebView ハイブリッド：Capacitor・Socket Runtime・Tauri
「Next.js をそのまま活かしたい」人の第一候補が、この系統です。3つは同じ WebView 系でも性格が違います。
- Capacitor（＋Ionic）：モバイル（iOS/Android）中心で実績が豊富。Next.js をビルドして Capacitor で包み、Ionic の UI 部品でネイティブ風の見た目に整えます。周辺プラグインとドキュメントが厚く、Web 開発者の移行がスムーズです。
- Socket Runtime：Web 技術でデスクトップ＋モバイルのアプリを作る軽量ランタイムで、ローカルファースト／P2P（ピアツーピア）通信が組み込みなのが特徴です。バックエンド必須ではありません。Next.js を動かす
socketsupply/next-nativeもありますが、こちらは star 10・最終コミット2024年5月・pre-release で、実質停滞している初期実験です（MIT・Socket Supply 社製）。 - Tauri：Rust のバックエンド＋システム WebView で、小さなバイナリが作れます。デスクトップで強く、モバイル対応は比較的新しめです。
なお、巷で「Next.js のネイティブアプリ用スターター」として売られている nextnative.dev は、この Capacitor 構成の有料テンプレート（Next.js＋Capacitor＋Ionic に Firebase/Supabase/RevenueCat を同梱）です。indie 開発者による非公式・非 OSSの製品で、Vercel とは無関係です。
ネイティブ UI と独自描画：React Native/Expo・Flutter
ネイティブの操作感を優先するなら、Web を包むのではなく、別の作り方に乗り換えます。
React Native / Expo：JS/TS で本物のネイティブ部品を動かします。Expo は RN を“全部入り”にしたもので、クラウドビルド（EAS）、OTA 更新、そして Next.js に似たファイルベースのルーティング（Expo Router） を備えます。Next.js の Web 画面そのものは流用できませんが、Solito を使うと、Next.js（Web）と Expo（モバイル）でナビゲーションやロジックを共有できます。「Web もアプリも React で、UI はネイティブ」を狙う構成です。
Flutter：Dart と独自の描画エンジン（Skia/Impeller）で、全プラットフォームに同一の見た目を“描き”ます。WebView にも依存せず、ネイティブ部品にも依存しないため、デザインを完全に統一しやすいのが強みです。ただし言語もエコシステムも Web/Next.js とは別物で、資産の流用は基本ありません。
選び方：何を再利用したいかで決まる
| 方式 | 画面の実体 | Next.js 資産の流用 | 向く場面 |
|---|---|---|---|
| Capacitor/Ionic（WebView） | Web（HTML/CSS/JS） | そのまま流用 | 既存 Next.js/Web を素早くモバイル化 |
| Socket Runtime（WebView） | Web | 流用可（連携は停滞中） | ローカルファースト/P2P・デスクトップも |
| React Native / Expo | ネイティブ部品 | 作り替え（Solito で共有） | ネイティブの操作感・エコシステム重視 |
| Flutter | 独自描画 | 基本なし | 全プラットフォーム同一の見た目を統一 |
HOW TO CHOOSE選び方
何を再利用したいかで決める
-
1.既存の Next.js/Web を活かしたい
Capacitor（＋Ionic）で WebView ハイブリッド化。モバイル中心・実績多数。『nextnative.dev』はこの構成の有料テンプレ（非公式・非OSS）
-
2.ローカルファースト/P2P・デスクトップも
Socket Runtime。ただし Next.js 連携の socketsupply/next-native は star 10・2024/5 以降停滞・pre-release で実運用は要注意
-
3.ネイティブの操作感・エコシステム重視
React Native / Expo。Next.js とはコードは分かれるが Solito でロジック共有。Expo Router は Next.js 風のファイルルーティング
-
4.描画を完全に自分で統一したい
Flutter。Dart・独自エンジンで全プラットフォーム同一の見た目。Web/Next.js 資産の流用は基本なし
実務的な判断基準はシンプルです。いまある Next.js/Web を最大限に流用して速く出したいなら Capacitor 系（WebView ハイブリッド）。ネイティブの操作感やストアのエコシステムを重視するなら React Native/Expo。見た目を全プラットフォームで完全にそろえたいなら Flutter。Socket Runtime は P2P/ローカルファーストという独自の強みがありますが、Next.js 連携の next-native は停滞しているため、採用するなら Socket Runtime 本体の現状を自分で確かめてからにしてください。
この記事の結論
- ・違いの軸は「画面の中身」。WebView ハイブリッド／ネイティブ UI／独自描画の3つ。Next.js をそのまま活かすなら WebView ハイブリッド。
- ・Capacitor（＋Ionic）＝モバイル中心で実績豊富、Socket Runtime＝P2P/ローカルファースト、Tauri＝Rust＋軽量（デスクトップ強い）。
- ・React Native/Expo＝本物のネイティブ UI（Solito で Next.js と共有）、Flutter＝独自描画の別スタック。
- ・モバイルで名前の近い「next native」（nextnative.dev＝有料 Capacitor テンプレ、socketsupply/next-native＝star 10・停滞の OSS）はどちらも Vercel 製ではない。Vercel 自身の「Next Native」はサーバーのネイティブ言語の話で別物。採用前に素性と活動状況を確認する。
参照ソース
- socketsupply/next-native（GitHub・Run Next.js on Socket Runtime・MIT）（star 10・最終コミット2024-05・pre-release の実測）
- Socket Runtime（socketsupply/socket）（Web 技術でデスクトップ/モバイル・P2P 組み込みのランタイム）
- Capacitor（公式ドキュメント）（WebView ハイブリッドの設計・プラグイン）
