enesien

Next.js App Router + Capacitor: what actually breaks, and how to fix it

Want this done for you? I run this setup in production: one push deploys the web app and ships a signed live update to every installed device, so mobile always matches web. If you want your Next.js app on iOS and Android without fighting any of this, I'll set it up for you: Capacitor, the mobile build, the App Router fixes below, and automatic live updates synced with your web deploys. Leave a comment below and I'll reach out.

If you've tried to turn a Next.js app into a native iOS/Android app with Capacitor, you've probably hit the same wall I did. Every guide says the same thing: add output: "export", give up API routes, middleware and next/image, and good luck.

Most people end up staying on the Pages Router for their mobile build. I did too, for a production app that ships live updates to devices on every web deploy. But I didn't want to stay on Pages forever, so I tested the App Router properly.

Setup: Next.js 16.4.2,

enesien

import { Capacitor } from "@capacitor/core";
import { Device } from "@capacitor/device";
import { SplashScreen } from "@capacitor/splash-screen";
import { StatusBar, Style } from "@capacitor/status-bar";
import { useState, useEffect } from "react";

interface CapacitorHookOptions {
  color: string;
  iosStyle: 'dark' | 'light';
  androidStyle: 'dark' | 'light';

enesien

interface ResizeOptions {
    /**
     * Desired width of the image.
     */
    width: number;
    /**
     * Desired height of the image.
     */
    height: number;
    /**

enesien

shadcn/ui multi tag input component

A react tag input field component using shadcn, like one you see when adding keywords to a video on YouTube. Usable with Form or standalone.

Preview

Standalone Usage