Build Native iOS & Android Apps with Next.js 15 and Capacitor - Step-by-Step Tutorial

If you're aiming to bring your Next.js 15 web app to iOS and Android devices, you're in the right place. In this guide, you'll learn how to convert your Next.js project into a native mobile app using Capacitor, a cross-platform runtime that bridges modern web apps with native mobile functionality.

Let’s dive into the process of building, configuring, and deploying a mobile-ready app using this powerful tech stack.

What Are Next.js and Capacitor?

Next.js 15 is the latest version of Vercel’s React-based framework, packed with cutting-edge features like app directory routing, enhanced static export support, and React Server Components.

Capacitor is an open-source framework from the Ionic team that lets you run web apps natively on iOS and Android with full access to device APIs, like camera, GPS, and notifications.

Together, these tools empower developers to reuse a single codebase for both web and mobile platforms.

Step 1: Set Up Your Next.js Project

1. To begin, create a new next.js project using create-next-app:

npx create-next-app@latest my-app

2. Now, Navigate to the project directory:

cd my-app

3. Executing the npm run static command might throw errors because of image optimization issues. To fix this, update your next.config.js file with the following configuration:

const nextConfig = {
  output: 'export',
  reactStrictMode: true,
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

4. To generate static files, run:

npm run build

Now you will find a new `out` folder at the root of your project

5. Test by serving your app in browser:

npx serve@latest out

Step 2: Add Capacitor to Your Next.js 15 App

1. Install the Capacitor CLI:

npm install -D @capacitor/cli

2. Initialize Capacitor within your project:

npx cap init

You can accept the default app name and bundle ID or customize them based on your project.

3. Install the required Capacitor packages:

npm install @capacitor/core @capacitor/ios @capacitor/android

4. Add native platform support:

npx cap add ios
npx cap add android

This will create native platform folders (ios and android) in your project directory.

Step 3: Configure Capacitor for Next.js Output

Edit or create capacitor.config.ts and ensure your webDir points to the static export folder:

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

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'out',
  bundledWebRuntime: false,
};

export default config;

Now, build your app and sync it with Capacitor:

npm run build
npx cap sync

Step 4: Run and Test the Native App

To open the native project in your development environment:

iOS (requires macOS + Xcode):

npx cap open ios

Android (requires Android Studio):

npx cap open android

Or you can open `android` directory of your project in Android Studio manually.

From there, you can build and run your app on simulators or physical devices using the respective tools.

Step 5: Enable Live Reload for Development

To make your development process faster, you can use Capacitor’s live reload feature. This allows your native app to auto-refresh as you make changes in your Next.js code.

Find your local IP address:

On macOS:

ipconfig getifaddr en0

On Windows:

ipconfig

Look for the IPv4 address.

Update capacitor.config.ts:

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
};

Replace YOUR_IP_ADDRESS with your actual local IP address.

Copy changes to native platforms:

npx cap copy

Run your development server:

npm run dev

Launch the native app via Android Studio or Xcode. Now, whenever you change and save a file in your Next.js app, it will automatically reload on your mobile device.

Note: This only reloads web changes. For native plugin changes, you’ll still need a full rebuild.

Conclusion

By combining Next.js 15’s static export capabilities with Capacitor’s native runtime, you can efficiently develop cross-platform apps that work seamlessly across web, Android, and iOS - all from a single codebase.

Whether you're building a side project or launching a production-grade app, this stack is powerful, modern, and developer-friendly.