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 cara mengubahnya menjadi aplikasi seluler native iOS dan Android menggunakan Capacitor 8 — versi terbaru dengan kinerja yang ditingkatkan dan fitur baru.

Capacitor menggabungkan aplikasi web Anda dalam 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 — code Next.js Anda berjalan dengan tetap.

Apa yang Anda pelajari:

Konfigurasi aplikasi Next.js Anda untuk ekspor statis
Tambahkan Capacitor 8 dengan plugin native yang penting
Buat dan tes pada simulator iOS dan Android
Aktifkan ulang pengisian hidup untuk pengembangan yang lebih cepat
Tambahkan Konsta UI secara opsional untuk komponen yang terlihat asli

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

Manfaat Menggunakan Next.js dan Capacitor

Code Reusability: 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 yang sudah terintegrasi, seperti rendering sisi server dan code membagi, memastikan waktu muat yang cepat dan pengalaman pengguna yang halus.
Kemampuan Asli: Capacitor memberikan akses ke fitur perangkat asli seperti kamera, lokasi geografis, dan lebih banyak lagi, memungkinkan Anda membangun aplikasi mobile 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

Sebelum memulai, pastikan Anda memiliki:

Node.js 18+ terpasang
An existing Next.js 15+ Aplikasi
Xcode (hanya untuk pengembangan iOS, macOS saja)
Studio Android (untuk pengembangan Android)

Mengonfigurasi 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;

Pengaturan ini menginformasikan Next.js untuk menghasilkan file HTML statis, dan output: 'export' menghindari Next.js image optimization yang membutuhkan server. images: { unoptimized: true } Perlu diingat:

Jika Anda menggunakan fitur yang membutuhkan server (__CAPGO_KEEP_0__ routing, komponen server dengan pengambilan data, dll.), Anda perlu meredefinisi fitur-fitur tersebut untuk menggunakan alternatif sisi klien atau API eksternal. If you’re using features that require a server (API routes, server components with data fetching, etc.), you’ll need to refactor those to use client-side alternatives or external APIs.

Tes ekspor statis dengan menjalankan: 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"
  }
}

bun

bun run build

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

Mengambahkan Capacitor 8 ke Proyek Anda

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

Pasang Capacitor core dan CLI:

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

Pasang plugin Capacitor yang umum yang Anda mungkin butuhkan:

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

Plugin ini menyediakan fitur penting:

@capacitor/app: Menghandle kejadian siklus aplikasi (depan/belakang, URL)
@capacitor/keyboard: Mengontrol perilaku kibor di mobile
@capacitor/splash-screenAtur layar splash native
@capacitor/preferensiSimpan data nilai-nilai 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 update file dengan konfigurasi yang tepat: capacitor.config.ts Pasang platform native:

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;

Tambahkan folder platform native:

bun add @capacitor/ios @capacitor/android

__CAPGO_KEEP_0__ akan membuat

bunx cap add ios
bunx cap add android

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

Untuk membuat proyek Android, Anda memerlukan Studio AndroidUntuk iOS, Anda membutuhkan Mac dengan Xcode.

Bangun dan sinkronkan proyek Anda:

bun run mobile

Ini menjalankan 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 perlu memiliki Xcode Anda perlu menginstal dan untuk aplikasi Android, Anda perlu Studio Android terpasang. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi di toko aplikasi, Anda perlu mendaftar ke Program Pengembang Apple untuk iOS dan Console Google Play untuk Android.

Buka proyek native:

Untuk iOS:

bun run mobile:ios

Untuk Android:

bun run mobile:android

atau langsung dengan Capacitor CLI:

bunx cap open ios
bunx cap open android

Bangun dan jalankan aplikasi:

Android Studio - Jalankan

Tunggu sampai proyek siap di Android Studio, lalu klik tombol “Run” untuk mengirimkan aplikasi ke perangkat yang terhubung atau emulator.
Dalam Xcode, atur akun tanda tangan Anda untuk mengirimkan aplikasi ke 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 ke perangkat mobile.

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

Capacitor Reload Hidup

Selama pengembangan, Anda dapat memanfaatkan fitur reload 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.

Ubah capacitor.config.ts untuk mengarahkan 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

The copy Perintah ini menyalin folder web dan perubahan konfigurasi ke proyek native tanpa mengupdate 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-perubahan tersebut.

Perlu diingat: Jika Anda menginstall 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 plugins memungkinkan Anda untuk mengakses fitur perangkat native dari aplikasi Next.js Anda. Mari kita jelajahi cara menggunakan plugin Share plugin sebagai contoh:

Install plugin Share:

bun add @capacitor/share

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

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 asli:

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

bun run mobile

Atau sinkronkan tanpa merekonstruksi:

bunx cap sync

Rekonstruksi dan jalankan aplikasi di perangkat Anda.

Sekarang, ketika Anda mengklik tombol “Bagikan sekarang!”, dialog bagikan asli akan muncul, memungkinkan Anda untuk membagikan konten dengan aplikasi lain.

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

Menambahkan Konsta UI v5 dengan Tailwind CSS 4

Saya telah bekerja selama tahun-tahun dengan Ionic untuk membangun aplikasi cross-platform yang luar biasa dan itu salah satu pilihan terbaik selama bertahun-tahun. Tapi sekarang saya tidak merekomendasikannya lagi karena sangat sulit untuk diintegrasi dengan Next.js dan tidak sepadan dengan waktu yang sudah dihabiskan ketika sudah memiliki pilihan lain Tailwind CSS 4.

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

Anda perlu memiliki Tailwind CSS 4 sudah terinstal Untuk meningkatkan tampilan mobile aplikasi Next.js Anda, Anda dapat menggunakan Konsta UI v5, sebuah perpustakaan komponen UI mobile yang dapat menyesuaikan 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 (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 project:

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 Konsta UI v5 App komponen 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 terinstal, kita bisa menggunakan komponen Konsta UI v5 React 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):

Di file 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 memiliki tampilan mobile yang terlihat asli yang dipasok oleh Konsta UI v5 dan diatur dengan Tailwind CSS 4.

Optimasi Kinerja

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

Mengurangi ukuran aplikasi dengan menghapus dependensi dan aset yang tidak digunakan.
Optimalkan gambar dan file media lainnya untuk mengurangi waktu pemuatan.
Implementasikan pengisian data secara santai untuk komponen dan halaman untuk meningkatkan kinerja pemuatan awal.
Gunakan rendering sisi server (SSR) dengan Next.js untuk meningkatkan kecepatan pemuatan aplikasi dan optimasi mesin pencari (SEO).
Manfaatkan Capacitor yang memiliki optimasi bawaan, seperti caching view web dan penggabungan aplikasi.

Kesimpulan

Anda telah berhasil mengonversi aplikasi web Next.js yang sudah ada menjadi aplikasi iOS dan Android asli menggunakan Capacitor 8. Kode web Anda sekarang 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 ulang muat secara langsung untuk pengembangan
Menambahkan Konsta UI secara opsional untuk komponen yang terlihat asli

Langkah-langkah selanjutnya:

Konfigurasi Capgo untuk pembaruan secara nirkabel tanpa resubmisi ke toko aplikasi
Tambahkan 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 di sini Membangun 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.

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