# How to Convert a Next.js Website into an Android App Using Capacitor

**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:

```text
https://your-app.vercel.app
```

Make sure everything works correctly before continuing.

* * *

# Step 2: Install Capacitor

Inside your project folder:

```bash
npm install @capacitor/core @capacitor/cli
```

Initialize Capacitor:

```bash
npx cap init
```

You'll be asked for:

| Field | Example |
| --- | --- |
| App Name | MyApp |
| App ID | com.yourname.myapp |
| Web Directory | Press Enter (we'll change it later) |

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

* * *

# Step 3: Add the Android Platform

Install Android support:

```bash
npm install @capacitor/android
```

Then add the platform:

```bash
npx cap add android
```

* * *

# Step 4: Configure Capacitor

Open:

```text
capacitor.config.ts
```

Replace it with:

```ts
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:

```bash
npx cap sync
```

This syncs the native Android project with your web project.

* * *

# Step 6: Open Android Studio

Run:

```bash
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:

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

After the build finishes:

```plaintext
APK(s) generated successfully
```

Click **Locate**.

Your APK will be inside:

```text
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:

```text
app-debug.apk
```

to your phone.

Open it and install.

If prompted, allow **Install from Unknown Sources**.

* * *

# Useful Android Studio Tips

| Action | Shortcut |
| --- | --- |
| Run App | ▶ Run |
| Stop App | ■ Stop |
| View Logs | Logcat |
| Clean Project | Build → Clean Project |
| Rebuild | Build → Rebuild Project |

* * *

# Useful Capacitor Commands

Initialize:

```bash
npx cap init
```

Sync:

```bash
npx cap sync
```

Open Android Studio:

```bash
npx cap open android
```

List platforms:

```bash
npx cap ls
```

Doctor (check installation):

```bash
npx cap doctor
```

* * *

# Add Capacitor Files to `.gitignore`

```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:

```bash
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:

```plaintext
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! 🚀