Mengubah 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 ditingkatkan dan fitur baru.

Capacitor mengelilingi aplikasi web Anda dengan kontainer native, memberikan akses ke API perangkat seperti kamera, filesystem, dan notifikasi push sambil menjaga kode React yang sudah ada. Berbeda dengan React Native, Anda tidak perlu menulis ulang apa pun — Next.js code Anda berjalan seperti semula.

Apa yang Anda akan pelajari:

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

Mau memulai proyek baru dari awal? Cek panduan kami pada Membuat Aplikasi Mobile Next.js dari Awal.

Kelebihan Menggunakan Next.js dan Capacitor

Kemampuan Reusability Code dari Next.js: Next.js memungkinkan Anda untuk 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 yang sudah terintegrasi, seperti rendering server-side dan code splitting, 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, memungkinkan Anda untuk membangun aplikasi seluler yang kaya fitur.
Pengembangan yang Dijelaskan: Dengan Capacitor, Anda dapat mengembangkan dan menguji aplikasi seluler Anda menggunakan teknologi web yang familiar, mengurangi kurva belajar dan mempercepat proses pengembangan.

Persyaratan Sebelumnya

Sebelum Anda memulai, pastikan Anda telah:

Node.js 18+ terinstal
Aplikasi yang sudah ada Aplikasi Next.js 15+ Xcode
terinstal untuk pengembangan iOS, macOS hanya
Android Studio untuk pengembangan Android

Konfigurasi Aplikasi Next.js Anda untuk Mobile

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

Buka file 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;

Konfigurasi output: 'export' pengaturan ini menginstruksikan Next.js untuk menghasilkan file HTML statis, dan images: { unoptimized: true } menghindari pengoptimalan gambar Next.js yang memerlukan server.

Penting: If Anda menggunakan fitur-fitur yang memerlukan server (API rute, komponen server dengan pengambilan data, dll.), Anda akan perlu meredefinisikan fitur-fitur tersebut untuk menggunakan alternatif sisi klien atau API eksternal.

Tambahkan skrip khusus ponsel ke 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"
  }
}

Test export statis dengan menjalankan:

bun run build

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

Menambahkan Capacitor 8 ke Proyek Anda

Untuk mengemas aplikasi Next.js Anda 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 ini menyediakan fitur-fitur penting:

@capacitor/app: Menghandle event kehidupan aplikasi (depan/belakang, URL)
@capacitor/keyboard: Mengatur perilaku keyboard 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 file capacitor.config.ts 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 asli:

bun add @capacitor/ios @capacitor/android

Tambahkan folder platform asli:

bunx cap add ios
bunx cap add android

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

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

Buat dan sinkronkan proyek Anda:

bun run mobile

Ini menjalankan skrip kustom Anda yang membangun proyek Next.js dan menyinkronkan file-file statis dengan platform asli.

Membangun dan Mengirimkan Aplikasi Asli

Untuk membangun dan mengirimkan aplikasi mobile native Anda, ikuti langkah-langkah berikut: Untuk mengembangkan aplikasi iOS, Anda perlu memiliki Xcode terpasang, dan untuk aplikasi Android, Anda perlu memiliki 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

Atau secara langsung dengan Capacitor CLI:

bunx cap open ios
bunx cap open android

Buat dan jalankan aplikasi:

android-studio-run

Di Android Studio, tunggu proyek siap, lalu klik tombol “Run” untuk mengirimkan aplikasi ke perangkat yang terhubung atau emulator.
Untuk mengatur akun tanda tangan Anda di Xcode, agar aplikasi dapat diinstal pada perangkat nyata. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan memandu 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 Anda pada perangkat mobile.

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

Capacitor Live Reload

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

Cari alamat IP lokal Anda:

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

Perbarui __CAPGO_KEEP_0__ capacitor.config.ts To arahkan 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).

Aplikasikan perubahan ke proyek asli Anda:

bunx cap copy

Perintah ini mengcopy folder web dan perubahan konfigurasi ke proyek asli tanpa mengupdate proyek seluruhnya. copy Rebuild dan jalankan aplikasi di perangkat Anda menggunakan Android Studio atau Xcode.

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

Perlu diingat: Jika Anda menginstall plugin baru atau membuat perubahan pada file asli, Anda perlu merebuild proyek asli karena reload hidup hanya berlaku untuk perubahan web __CAPGO_KEEP_0__.

Menggunakan code Plugins

Plugin Capacitor memungkinkan Anda untuk mengakses fitur perangkat asli dari aplikasi Next.js. Mari kita eksplorasi cara menggunakan plugin Share.

Plugins Capacitor memungkinkan Anda untuk mengakses fitur perangkat asli dari aplikasi Next.js. Mari kita eksplorasi cara menggunakan plugin Capacitor. Plugin __CAPGO_KEEP_0__ memungkinkan Anda untuk mengakses fitur perangkat asli dari aplikasi Next.js. Mari kita eksplorasi cara menggunakan plugin __CAPGO_KEEP_0__. As contoh:

Install plugin Berbagi:

bun add @capacitor/share

Update pages/index.js file untuk menggunakan plugin Berbagi:

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>
  );
}

Sinkronkan perubahan dengan proyek native:

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:

bun run mobile

Atau hanya sinkronisasi tanpa membangun ulang:

bunx cap sync

Bangun ulang dan jalankan aplikasi di perangkat Anda.

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

Untuk membuat tombol terlihat lebih ramah mobile, kita dapat menambahkan gaya menggunakan library komponen UI favorit saya untuk aplikasi web - Next.js (tanpa bermaksud).

Menambahkan Konsta UI v5 dengan Tailwind CSS 4

Saya telah bekerja selama beberapa tahun dengan Ionic untuk membangun aplikasi lintas platform yang luar biasa dan itu salah satu pilihan terbaik selama beberapa 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 yang sudah terinstal Untuk meningkatkan tampilan mobile aplikasi Next.js Anda, Anda dapat menggunakan Konsta UI v5, sebuah perpustakaan komponen UI mobile yang dapat menyesuaikan dengan gaya iOS dan Android. Ikuti langkah-langkah berikut untuk mengintegrasikan Konsta UI v5:

Instal paket yang diperlukan (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 Konsta UI v5 App di 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;

Halaman Contoh

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

Perbarui 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):

Ini di dalam pages/_document.js atau file HTML utama Anda, 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 dengan menggunakan 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 pengisian data secara santai untuk komponen dan halaman untuk meningkatkan kinerja muat awal.
Gunakan rendering sisi server (SSR) dengan Next.js untuk meningkatkan kecepatan muat aplikasi dan optimasi mesin pencari (SEO).
Maksimalkan Capacitor’s optimasi bawaan, seperti caching view web dan penggabungan aplikasi.

Kesimpulan

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

Apa yang Anda capai:

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

Langkah-langkah selanjutnya:

Mengatur Capgo untuk pembaruan secara nirkabel tanpa resubmisi ke toko aplikasi
Menambahkan plugin native lain seperti Kamera, Lokasi, atau Notifikasi Push
Konfigurasi ikon aplikasi dan layar splash untuk produksi
Persiapkan aplikasi Anda untuk pengiriman ke App Store dan Google Play

Membuat proyek baru? Cek 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.

Teruskan dari Mengubah Aplikasi Next.js Anda ke iOS dan Android dengan Capacitor 8

Jika Anda menggunakan Mengubah Aplikasi Next.js Anda ke iOS dan Android dengan Capacitor 8 untuk merencanakan pekerjaan plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur produk di Ionic Enterprise Plugin Alternatif, dan Capgo Pembangunan Natively untuk alur produk di Capgo Pembangunan Natively.

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