Published , Last updated
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.
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.
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
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.
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
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.
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.
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.