Create a Mobile App with NextNative (iOS & Android)

This guide shows how to ship a real mobile app for iOS and Android using NextNative. You keep one Next.js codebase and gain native builds and device APIs.

Why use NextNative?#

• One codebase: Web, iOS and Android share the same React/Next.js app.
• Fast DX: App Router, TypeScript, Tailwind, and live reload work on mobile.
• Native access: Camera, push notifications, files, and more via Capacitor plugins.

Clone the NextNative starter#

git clone https://github.com/lite1pal/nextnative_boilerplate.git [YOUR_APP_NAME] 
 cd [YOUR_APP_NAME] 
 npm i 
 git remote remove origin 
 mv .env.example .env.local 

Requirements: Node.js 20+. Set up platform SDKs per Capacitor’s guide: Environment setup.

iOS (macOS)#

• Xcode 16.0+ and Command Line Tools (xcode-select --install)
• Homebrew + CocoaPods (for simulators)

pod --version || brew install cocoapods 

Android#

• Android Studio + Android SDK (create at least one AVD)
• On Apple Silicon, the “Ladybug October 2024” build is a stable choice (Studio archive).

3) Start the mobile dev server#

Builds static assets, wires API routes, watches changes, and live-reloads the native shell:

npm run mobile:dev 

4) Open native projects#

iOS#

npx cap open ios 

Android#

npx cap open android 

Note: If you don’t need Firebase Auth/Notifications, remove apply plugin: 'com.google.gms.google-services' from android/app/build.gradle. For Firebase, add an Android app in the console and place android/app/google-services.json.

5) Production build for stores#

npm run mobile 

Then follow the checklist: Preparing for deployment.

What you get#

• ✅ A Next.js app from create-next-app, packaged for iOS & Android
• ✅ Native capabilities through Capacitor plugins
• ✅ Faster iteration with live reload and a single repo

---

Keep going: Ship in 5 minutes • Free app tools