OtaKitOtaKit
Docs
Dashboard →

Next.js guide

This walkthrough takes a Next.js app from zero to its first OTA update with the default hosted OtaKit flow.

1

Create the Next.js app

npx create-next-app@latest my-app
cd my-app
2

Configure Next.js for static export

// next.config.ts
const nextConfig = {
  output: "export",
};

export default nextConfig;
3

Add Capacitor

npm install @capacitor/core @capacitor/cli
npx cap init my-app com.example.myapp

Set webDir to out in capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: "com.example.myapp",
  appName: "my-app",
  webDir: "out",
};

export default config;
4

Add native platforms

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
5

Install the OtaKit plugin

npm install @otakit/capacitor-updater
npx cap sync
6

Create an OtaKit app and log in

Create an app in the OtaKit dashboard and copy its appId. Then install the CLI and log in:

npm install -g @otakit/cli
otakit login
7

Configure the plugin

const config: CapacitorConfig = {
  appId: "com.example.myapp",
  appName: "my-app",
  webDir: "out",
  plugins: {
    OtaKit: {
      appId: "YOUR_OTAKIT_APP_ID",
      appReadyTimeout: 10000,
    }
  }
};
8

Add notifyAppReady()

Create a client component that confirms the app loaded successfully:

// app/components/AppReady.tsx
"use client";
import { useEffect } from "react";
import { Capacitor } from "@capacitor/core";
import { OtaKit } from "@otakit/capacitor-updater";

export function AppReady() {
  useEffect(() => {
    if (Capacitor.isNativePlatform()) {
      OtaKit.notifyAppReady();
    }
  }, []);

  return null;
}

Add it to your root layout:

// app/layout.tsx
import { AppReady } from "./components/AppReady";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AppReady />
        {children}
      </body>
    </html>
  );
}
9

Build and run on a device

npm run build
npx cap sync
npx cap run ios       # or: npx cap run android
10

Ship your first OTA update

Make a visible change to your app, rebuild, and release:

npm run build
otakit upload --release

Relaunch the app on your device. By default, OtaKit downloads the update in the background and activates it on the next cold launch.

Next