How to Build an iOS App with Next.js in 2025

Most web developers waste days fighting provisioning profiles, signing errors, and iOS build failures.

This guide shows the cleanest, modern workflow that actually works — even if you’ve never shipped an iOS app before.

This is the exact setup used to publish Sproutly AI and Lasting Habits to the App Store.

Download Xcode from the Mac App Store (it's ~10GB). After installation, install command-line tools.

# Verify installation
xcode-select -p

# Install command line tools if needed
xcode-select --install

iOS apps need static files. Configure Next.js to export a static version for Capacitor.

const nextConfig = {
  ...(process.env.IS_NATIVE && {
    output: "export",
    images: { unoptimized: true },
  })
};

export default nextConfig;

Add scripts to build and open the iOS project easily.

"mobile": "cross-env IS_NATIVE=true npm run build && cross-env IS_NATIVE=true npx cap sync",
"mobile:dev": "cross-env IS_NATIVE=true npm run build && cross-env IS_NATIVE=true npx cap sync && npm run dev"

Add Capacitor to your project.

npm install @capacitor/core @capacitor/cli
npx cap init

Configure Capacitor to use your build directory.

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.app',
  appName: 'Your App Name',
  webDir: 'out',
};

export default config;

Create the native iOS project folder.

npx cap add ios

Build your Next.js app and sync it with the iOS project.

npm run build
npx cap sync ios

Open your project in Xcode to configure signing.

npx cap open ios

In Xcode: select a simulator (e.g., iPhone 15 Pro), then press Cmd+R.

1. Connect your iPhone via USB
2. Trust the computer
3. Select your device and Run

• Build errors after sync? Run: npx cap sync ios + build clean
• App stuck on splash screen? Ensure static export is enabled
• Signing errors? Re-enable “Automatically manage signing”

Want to skip setup and start from a working iOS app?

See what's included in NextNative →