Ubah Aplikasi Next.js Anda ke iOS & Android dengan Capacitor 8

Pendahuluan

Anda memiliki aplikasi web Next.js yang sudah ada? Dalam panduan ini, Anda akan belajar bagaimana mengubahnya menjadi aplikasi mobile native iOS dan Android menggunakan Capacitor 8 — versi terbaru dengan kinerja yang lebih baik dan fitur baru.

Capacitor menggabungkan aplikasi web Anda dalam sebuah kontainer native, memberikan akses ke API perangkat seperti kamera, sistem file, dan notifikasi push sambil menjaga kode React yang sudah ada. Berbeda dengan React Native, Anda tidak perlu menuliskan kembali apa pun — Next.js code berjalan dengan tetap.

Apakah yang akan Anda pelajari:

Konfigurasi aplikasi Next.js yang sudah ada untuk ekspor statis
Tambahkan Capacitor 8 dengan plugin native yang penting
Bangun dan tes pada simulator iOS dan Android
Aktifkan ulang hidup untuk pengembangan yang lebih cepat
Opsional: tambahkan Konsta UI untuk komponen yang terlihat native

Berkeinginan untuk memulai proyek baru dari awal? Periksa panduan kami tentang Membangun Aplikasi Mobile Next.js dari Awal.

Manfaat Menggunakan Next.js dan Capacitor

Code Reusabilitas: Next.js memungkinkan Anda menulis komponen yang dapat digunakan kembali dan berbagi code antara aplikasi web dan mobile Anda, menghemat waktu dan upaya pengembangan.
Kinerja: Next.js menawarkan optimasi kinerja bawaan, seperti rendering server-side dan code splitting, sehingga memastikan waktu muat yang cepat dan pengalaman pengguna yang halus.
Kemampuan Asli: Capacitor memberikan akses ke fitur perangkat asli seperti kamera, lokasi geografis, dan lain-lain, sehingga memungkinkan Anda untuk membangun aplikasi seluler yang kaya fitur.
Pengembangan yang Sederhana: Dengan Capacitor, Anda dapat mengembangkan dan menguji aplikasi seluler Anda menggunakan teknologi web yang familiar, sehingga mengurangi kurva belajar dan mempercepat proses pengembangan.

Persyaratan Sebelumnya

Sebelum Anda memulai, pastikan Anda telah:

Node.js 18+ terinstal
Aplikasi Seluler yang Ada Next.js 15+ Aplikasi
Xcode (untuk pengembangan iOS, macOS hanya)
Android Studio (untuk pengembangan Android)

Mengatur Aplikasi Next.js Anda untuk Mobile

Langkah pertama adalah mengatur aplikasi Next.js Anda untuk ekspor statis. Capacitor membutuhkan file HTML/JS/CSS statis untuk dijadikan aplikasi native.

Buka next.config.js (atau next.config.ts) dan tambahkan konfigurasi ekspor:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

Pengaturan output: 'export' ini menginformasikan Next.js untuk menghasilkan file HTML statis, dan images: { unoptimized: true } menghindari optimasi gambar Next.js yang memerlukan server.

Perlu diingat: Jika Anda menggunakan fitur yang memerlukan server (API rute, komponen server dengan pengambilan data, dll.), Anda perlu meredefinisi fitur-fitur tersebut untuk menggunakan alternatif sisi klien atau API eksternal.

Tambahkan skrip khusus ponsel ke dalam package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "mobile": "bun run build && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

Tes ekspor statis dengan menjalankan:

bun run build

Anda seharusnya melihat sebuah out folder di root proyek Anda. Folder ini berisi semua file statis yang Capacitor akan bundel ke dalam aplikasi native.

Mengintegrasikan Capacitor 8 ke Dalam Proyek Anda

Untuk mengemas aplikasi Next.js ke dalam kontainer ponsel native, ikuti langkah-langkah berikut:

Instal Capacitor core dan CLI:

bun add @capacitor/core
bun add -D @capacitor/cli

Instal plugin Capacitor umum yang Anda mungkin butuhkan:

bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/preferences

Plugin-plugin ini menyediakan fitur-fitur penting:

@capacitor/app: Menghandle kejadian siklus aplikasi (depan/belakang, URL)
@capacitor/keyboard: Mengontrol perilaku kibor di perangkat mobile
@capacitor/splash-screen: Mengelola layar splash native
@capacitor/preferences: Menyimpan data nilai kunci secara persisten

Inisialisasi Capacitor dengan detail proyek Anda:

bunx cap init my-app com.example.myapp --web-dir out

Ganti my-app dengan nama aplikasi Anda dan com.example.myapp dengan ID aplikasi Anda (notasi domain terbalik)

Buat atau perbarui capacitor.config.ts file dengan konfigurasi yang tepat:

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

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'out',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      showSpinner: false,
      splashFullScreen: true,
      splashImmersive: true,
    },
  },
};

export default config;

Pasang platform native:

bun add @capacitor/ios @capacitor/android

Tambahkan folder platform native:

bunx cap add ios
bunx cap add android

Capacitor akan membuat ios dan android folder-folder di root project Anda yang berisi proyek native.

Untuk membangun proyek Android, Anda memerlukan Android Studio. Untuk iOS, Anda memerlukan Mac dengan Xcode.

Buat dan sinkronkan proyek Anda:

bun run mobile

Menggunakan skrip kustom Anda yang membangun proyek Next.js dan sinkronisasi file statis dengan platform native.

Membangun dan Mengembangkan Aplikasi Nativ

Untuk membangun dan mengembangkan aplikasi mobile native Anda, ikuti langkah-langkah berikut: Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terpasang, dan untuk aplikasi Android, Anda memerlukan Android Studio terpasang. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi Anda di toko aplikasi, Anda perlu mendaftar ke Program Pengembang Apple untuk iOS dan Google Play Console untuk Android.

Buka proyek-proyek native:

Untuk iOS:

bun run mobile:ios

Untuk Android:

bun run mobile:android

Or directly with Capacitor CLI:

bunx cap open ios
bunx cap open android

Buat dan jalankan aplikasi:

__CAPGO_KEEP_0__ android-studio-run

Dalam Studio Android, tunggu proyek siap, lalu klik tombol “Run” untuk menginstal aplikasi ke perangkat yang terhubung atau emulator.
Dalam Xcode, atur akun tanda tangan Anda untuk menginstal aplikasi ke perangkat nyata. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengarahkan Anda melalui prosesnya (perlu diingat bahwa Anda harus terdaftar dalam Program Pengembang Apple). Setelah diatur, klik tombol “Play” untuk menjalankan aplikasi pada perangkat yang terhubung.

Selamat! Anda telah berhasil menginstal aplikasi web Next.js ke perangkat mobile.

Tapi tunggu, ada cara yang lebih cepat untuk melakukannya selama pengembangan...

Capacitor Live Reload

Selama pengembangan, Anda dapat memanfaatkan ulang muatan hidup untuk melihat perubahan secara instan pada perangkat mobile. Untuk mengaktifkan fitur ini, ikuti langkah-langkah berikut:

Temukan alamat IP lokal Anda:

Pada macOS, jalankan perintah berikut di terminal:
```
ipconfig getifaddr en0
```
Pada Windows, jalankan:
```
ipconfig
```
Cari alamat IPv4 di output.

Perbarui capacitor.config.ts untuk mengarah ke server pengembangan Anda:

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

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'out',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
};

export default config;

Ganti YOUR_IP_ADDRESS dengan alamat IP lokal Anda (misalnya 192.168.1.100).

Terapkan perubahan ke proyek native Anda:

bunx cap copy

Perintah copy mengcopy folder web dan perubahan konfigurasi ke proyek native tanpa memperbarui proyek seluruhnya.

Rebuild dan jalankan aplikasi di perangkat Anda menggunakan Android Studio atau Xcode.

Sekarang, setiap kali Anda membuat perubahan pada aplikasi Next.js Anda, aplikasi mobile akan secara otomatis reload untuk menampilkan perubahan tersebut.

Perlu diingat: Jika Anda menginstal plugin baru atau membuat perubahan pada file native, Anda perlu merebuild proyek native karena pengisian ulang hidup hanya berlaku untuk perubahan web code.

Menggunakan Capacitor Plugins

Capacitor plugin memungkinkan Anda untuk mengakses fitur perangkat native dari aplikasi Next.js Anda. Mari kita jelajahi cara menggunakan plugin "Share" sebagai contoh: Plugin Berbagi sebagai contoh:

Instal plugin Berbagi:

bun add @capacitor/share

Update file untuk menggunakan plugin Berbagi: pages/index.js Sinkronkan perubahan dengan proyek native:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { Share } from '@capacitor/share';

export default function Home() {
  const share = async () => {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends',
    });
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Capgo!</a>
        </h1>

        <p className={styles.description}>
          <h2>Cool channel</h2>
          <button onClick={() => share()}>Share now!</button>
        </p>
      </main>
    </div>
  );
}

Seperti yang telah disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian redeploy aplikasi ke perangkat kita. Untuk melakukan ini, jalankan perintah berikut:

Atau hanya sinkronisasi tanpa membangun ulang:

bun run mobile

Buat ulang dan jalankan aplikasi di perangkat Anda.

bunx cap sync

Sekarang, ketika Anda mengklik tombol "Berbagi sekarang!" , dialog berbagi native akan muncul, memungkinkan Anda untuk berbagi konten dengan aplikasi lain.

next-__CAPGO_KEEP_0__-berbagi

Untuk membuat tombol terlihat lebih ramah ponsel, kita bisa menambahkan gaya menggunakan library komponen UI favorit saya untuk aplikasi web - Next.js (tanpa maksud ganda).

Menambahkan Konsta UI v5 dengan Tailwind CSS 4

Saya telah bekerja selama tahun-tahun dengan Ionic untuk membangun aplikasi lintas platform yang luar biasa dan itu salah satu pilihan terbaik selama bertahun-tahun. Tapi sekarang saya tidak merekomendasikannya lagi karena sangat sulit untuk mengintegrasikannya dengan Next.js dan tidak terlalu berharga ketika Anda sudah memiliki Tailwind CSS 4.

jika Anda ingin tampilan mobile yang sangat menarik yang dapat menyesuaikan dengan gaya iOS dan Android khusus, saya merekomendasikan Konsta UI v5.

Anda perlu memiliki Tailwind CSS 4 sudah terinstal Untuk meningkatkan tampilan mobile aplikasi Next.js, Anda bisa menggunakan Konsta UI v5, sebuah library komponen UI yang ramah ponsel yang dapat menyesuaikan dengan gaya iOS dan Android. Ikuti langkah-langkah berikut untuk mengintegrasikan Konsta UI v5:

Pasang paket yang dibutuhkan (Konsta UI v5):

bun add konsta

Impor tema Konsta UI di file CSS utama Anda (misalnya styles/globals.css):

@import 'tailwindcss';
/* import Konsta UI v5 theme */
@import 'konsta/theme.css';

Konfigurasi Tailwind CSS 4 untuk Next.js (PostCSS):

Buat postcss.config.mjs di root proyek:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Tailwind v4 menggunakan PostCSS secara langsung di Next.js. Simpan import global Anda di styles/globals.css (sudah ditambahkan di atas).

Bungkus aplikasi Anda dengan komponen App Halaman Contoh pages/_app.js:

import { App } from 'konsta/react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

Sekarang ketika semua sudah terkonfigurasi, kita bisa menggunakan komponen React Konsta UI v5 di halaman Next.js kita.

Perbarui

__CAPGO_KEEP_0__ pages/index.js file untuk menggunakan komponen Konsta UI v5:

import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/react';

export default function Home() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Here is your Next.js & Konsta UI app. Let's see what we have here.
        </p>
      </Block>
      <BlockTitle>Navigation</BlockTitle>
      <List>
        <ListItem href="/about/" title="About" />
        <ListItem href="/form/" title="Form" />
      </List>

      <Block strong className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}

Tambahkan font Roboto untuk tema Material Design (diperlukan untuk Konsta UI v5):

Pada file HTML Anda pages/_document.js atau file HTML utama, tambahkan:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>

Mulai ulang server pengembangan dan bangun kembali aplikasi.

Aplikasi Next.js Anda sekarang harus memiliki tampilan mobile yang terlihat asli yang dipasok oleh Konsta UI v5 dan diatur dengan Tailwind CSS 4.

Optimasi Kinerja

Untuk memastikan kinerja optimal aplikasi Next.js dan Capacitor Anda, pertimbangkan praktik terbaik berikut:

Minimalkan ukuran aplikasi dengan menghapus dependensi dan aset yang tidak digunakan.
Optimalkan gambar dan file media lainnya untuk mengurangi waktu muat.
Implementasikan penggunaan muatan yang cerdas untuk komponen dan halaman untuk meningkatkan kinerja muatan awal.
Gunakan rendering sisi server (SSR) dengan Next.js untuk meningkatkan kecepatan muat aplikasi dan optimasi mesin pencari (SEO).
Manfaatkan optimasi bawaan Capacitor seperti caching tampilan web dan penggabungan aplikasi.

Kesimpulan

Anda telah berhasil mengonversi aplikasi web Next.js yang ada menjadi aplikasi native iOS dan Android menggunakan Capacitor 8. Kodebase web Anda berjalan secara native di perangkat mobile dengan akses ke API perangkat.

Apa yang Anda capai:

Mengonfigurasi Next.js untuk ekspor statis
Menambahkan Capacitor 8 dengan plugin yang penting
Membangun dan mengirim ke simulator iOS dan Android
Mengaktifkan ulang hidup untuk pengembangan
Menambahkan Konsta UI secara opsional untuk komponen yang terlihat native

Langkah-langkah selanjutnya:

Mengatur Capgo untuk pembaruan melalui udara tanpa resubmisi toko aplikasi
Tambahkan lebih banyak plugin asli seperti Kamera, Lokasi, atau Notifikasi Push
Konfigurasi ikon aplikasi dan layar splash untuk produksi
Siapkan aplikasi Anda untuk pengajuan App Store dan Google Play

Membuat proyek baru? Cek di Membuat Aplikasi Mobile Next.js dari Awal untuk panduan langkah demi langkah.

Sumber Daya

Pelajari bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat, daftar diri untuk akun gratis hari ini.

Mengubah Aplikasi Next.js Anda ke iOS &amp; Android dengan Capacitor 8