Zenn
📚

Next.jsにCapacitor導入

2023/12/13に公開
Next.js
React
Capacitor
App Router
tech

最近、X で Next.js Native に関する話題をよく見かけ、社内でも話題に上がっていました。それで興味を持ち、実際に既存のNext.jsプロジェクトをネイティブアプリ化することができるのか試してみることにしました。
今回は Capacitor をインストールしてiOSのシミュレーターを使ってアプリを起動するまでを行ってみました！！
初めは変更のたびにビルドが必要かと思っていたのですが、ホットリロードにも対応できました🎉

やったこと

  • Next.js13(App Router) に Capacitor をインストール
  • iOS でアプリ起動

やってないこと

  • App Store で公開
  • Android でアプリ起動

Capacitor インストール

npm install -D @capacitor/cli
npx cap init
npm install @capacitor/core @capacitor/ios @capacitor/android

next.config.js

const nextConfig = {
  reactStrictMode: false,
  experimental: {
    appDir: true,
  },
  # ↓二つを設定しないとエラーになるかも
  output: "export",
  images: {
    unoptimized: true,
  },
};

capacitor.config.ts

const config: CapacitorConfig = {
  appId: "com.xxx.app",
  appName: "xxx",
  # デフォルトでは public になってるので修正
  webDir: "out",
  bundledWebRuntime: false,
  server: {
    // 自分のローカルIPを指定する
    url: "http://192.168.x.xx:3000",
    cleartext: true,
  },
};

next.config.js & capacitor.config.ts 設定後

npx cap add ios

シミュレーター起動

# 先にローカルサーバー起動しておく
npm run dev
# web と native を同期する
npx cap sync
# ターミナルからシミュレーターを選択する
npx cap run ios

注意点

  • デバッグは Safari (Mac) > 開発 からシミュレーターを選択して行う
  • CapacitorConfig で server の設定をしていないとURLスキームがhttp:// ではなく capacitor:/ となっている
    • API側でcors origin等の追記が必要かも
  • podインストールエラーになった場合は↓のコマンドで解決するかも
    • npx pod-install

参考

Discussion