Meta Description: Learn how to convert your Next.js website into an Android app using Capacitor on Windows. Step-by-step guide with Android Studio setup, APK generation, and deployment.

If you've already built a Next.js application and deployed it (for example on Vercel), you can easily wrap it as a native Android app using Capacitor—without rewriting your application in React Native or Flutter.

I recently set this up for one of my projects, and this guide serves as a quick reference for future me and anyone getting started.

Environment

• Windows 11

• Next.js (App Router)

• Capacitor

• Android Studio

• Vercel Deployment

Prerequisites

Before starting, make sure you have:

• ✅ Node.js installed

• ✅ A working Next.js project

• ✅ Your app deployed (Vercel recommended)

• ✅ Android Studio installed

• ✅ Android SDK installed (via Android Studio)

Step 1: Deploy Your Next.js App

Capacitor will load your live website inside a native Android application.

Deploy your project first.

Example:

https://your-app.vercel.app

Make sure everything works correctly before continuing.

Step 2: Install Capacitor

Inside your project folder:

npm install @capacitor/core @capacitor/cli

Initialize Capacitor:

npx cap init

You'll be asked for:

💡 App ID must be unique (reverse domain format).

Step 3: Add the Android Platform

Install Android support:

npm install @capacitor/android

Then add the platform:

npx cap add android

Step 4: Configure Capacitor

Open:

capacitor.config.ts

Replace it with:

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

const config: CapacitorConfig = {
  appId: 'com.yourname.myapp',
  appName: 'MyApp',
  webDir: 'public',
  server: {
    url: 'https://your-app.vercel.app',
    cleartext: true,
  },
};

export default config;

Replace:

• appId

• appName

• server.url

with your own values.

Why use server.url?

Instead of bundling your Next.js build into the APK, Capacitor loads your live website.

Benefits:

• No need to rebuild the APK after every frontend update.

• Simply redeploy your Next.js app, and users will see the latest version automatically.

Step 5: Sync Capacitor

Whenever you modify the Capacitor configuration or install plugins, run:

npx cap sync

This syncs the native Android project with your web project.

Step 6: Open Android Studio

Run:

npx cap open android

Android Studio will open your native Android project.

Step 7: Wait for Gradle Sync

The first launch usually takes a few minutes.

You'll see messages like:

• Gradle Sync

• Indexing

• Downloading dependencies

⏳ Wait until everything finishes before building.

Step 8: Generate a Debug APK

Inside Android Studio:

Build
    ↓
Generate App Bundles or APKs
    ↓
Generate APK(s)

After the build finishes:

APK(s) generated successfully

Click Locate.

Your APK will be inside:

android/app/build/outputs/apk/debug/app-debug.apk

Step 9: Install on Your Android Phone

Option A — USB Debugging (Recommended)

1. Enable Developer Options

2. Enable USB Debugging

3. Connect your phone

4. Click the ▶ Run button inside Android Studio

5. Select your device

Your app will install automatically.

Option B — Install APK Manually

Copy:

app-debug.apk

to your phone.

Open it and install.

If prompted, allow Install from Unknown Sources.

Useful Android Studio Tips

Useful Capacitor Commands

Initialize:

npx cap init

Sync:

npx cap sync

Open Android Studio:

npx cap open android

List platforms:

npx cap ls

Doctor (check installation):

npx cap doctor

Add Capacitor Files to .gitignore

# Capacitor
android/.gradle/
android/app/build/
android/build/
android/local.properties
android/captures/
android/.idea/
android/*.iml

ios/App/App/public/
ios/App/build/
ios/DerivedData/
ios/.symlinks/
ios/Pods/
ios/Podfile.lock

# Android Build Outputs
*.apk
*.aab
*.ap_
*.dex

# Capacitor Generated
.capacitor/

# Native IDE Files
*.xcworkspace
*.xcuserstate
*.xcuserdata/

Common Issues

Gradle Sync Takes Forever

The first sync downloads Android SDK components, Gradle, and dependencies.

Be patient—it gets much faster after the first run.

Website Doesn't Update

If you change:

• capacitor.config.ts

• App icon

• Plugins

Run:

npx cap sync

again before rebuilding.

If you're only updating your Next.js frontend, simply redeploy to Vercel. Since the app uses server.url, users will automatically load the latest version when they reopen the app.

Android Studio Can't Find SDK

Open:

Android Studio
    ↓
Settings
    ↓
Android SDK

Install any missing SDK components.

Final Thoughts

Capacitor is one of the easiest ways to turn an existing Next.js application into a native Android app.

The biggest advantage of using server.url is that your APK acts as a lightweight wrapper around your live website, allowing you to ship frontend updates without rebuilding the app every time.

If you're already building with Next.js, this is a great way to quickly reach Android users while keeping a single codebase.

Happy building! 🚀