Search for a command to run...
No comments yet. Be the first to comment.
This is Part 2 of my Next.js Caching series. In Part 1, we covered Browser Cache, CDN, Router Cache, Full Route Cache, Data Cache, unstable_cache, and use cache. Previously... We learned that a requ
When someone opens your website, does Next.js immediately query your database? Not always. A request may pass through multiple cache layers before your database is even touched. The more requests serv
Introduction If you've been building with React or Next.js, you've probably heard terms like: SSR SSG ISR CSR PPR React Server Components unstable_cache At first, they all sound like differen
While building My Project, one of the biggest challenges wasn't building the UI—it was deciding how to cache data correctly. I wanted my application to: ⚡ Feel instant while navigating 🔍 Remain SEO
Akash Blog
19 posts
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
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)
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.
Inside your project folder:
npm install @capacitor/core @capacitor/cli
Initialize Capacitor:
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).
Install Android support:
npm install @capacitor/android
Then add the platform:
npx cap add android
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.
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.
Whenever you modify the Capacitor configuration or install plugins, run:
npx cap sync
This syncs the native Android project with your web project.
Run:
npx cap open android
Android Studio will open your native Android project.
The first launch usually takes a few minutes.
You'll see messages like:
Gradle Sync
Indexing
Downloading dependencies
⏳ Wait until everything finishes before building.
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
Enable Developer Options
Enable USB Debugging
Connect your phone
Click the ▶ Run button inside Android Studio
Select your device
Your app will install automatically.
Copy:
app-debug.apk
to your phone.
Open it and install.
If prompted, allow Install from Unknown Sources.
| Action | Shortcut |
|---|---|
| Run App | ▶ Run |
| Stop App | ■ Stop |
| View Logs | Logcat |
| Clean Project | Build → Clean Project |
| Rebuild | Build → Rebuild Project |
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
.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/
The first sync downloads Android SDK components, Gradle, and dependencies.
Be patient—it gets much faster after the first run.
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.
Open:
Android Studio
↓
Settings
↓
Android SDK
Install any missing SDK components.
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! 🚀