メインコンテンツにジャンプ
Capgoロゴ
チュートリアル

Capacitor 8を使ってNext.jsモバイルアプリを作成する

Capacitor 8を使用して、ステップバイステップでNext.js 15プロジェクトを作成し、iOSおよびAndroidモバイルアプリに変換する方法についてのガイドです。モバイルファースト開発を始めるのにぴったりです。

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター
Next.jsモバイルアプリケーションを作成するには、Capacitor 8

導入

Next.jsから始めてモバイルアプリケーションを作成したいですか。このガイドでは、モバイル向けに設定されたNext.js 15プロジェクトを作成し、Native iOSおよびAndroidアプリとしてパッケージ化する方法を説明します。 Capacitor 8.

このチュートリアルを終了すると、シミュレータ上で動作するワークングモバイルアプリケーションを取得できます。このアプリケーションを開発し、最終的にApp StoreおよびGoogle Playに公開することができます。

所要時間 ~30分

作成するもの

  • App Routerを備えた新しいNext.js 15プロジェクト
  • モバイル向けの静的エクスポート設定
  • Capacitor 8 with essential plugins
  • ネイティブiOSおよびAndroidアプリ
  • ライブリロード開発環境

すでにNext.jsアプリを持っていますか? こちらをご確認ください。 Next.jsアプリをモバイルに変換する それに続いて。

前提条件

以下をインストールしてください:

  • Node.js 18+ (管理者と確認してください node --version)
  • Bun パッケージマネージャーcurl -fsSL https://bun.sh/install | bash)
  • Xcode macOSのみで、iOS開発用
  • Android Studio Android開発用

Step 1: Next.jsプロジェクトを作成

新しいNext.js 15プロジェクトを作成してください:

bunx create-next-app@latest my-mobile-app

入力されたときに、次のオプションを選択してください:

  • TypeScript: Yes (推奨)
  • ESLint: Yes
  • Tailwind CSS: はい (モバイルスタイリングの推奨)
  • src/ __CAPGO_KEEP_0__ はい
  • App Router: はい (推奨)
  • Import alias: Default (@/*)

プロジェクトに移動:

cd my-mobile-app

ステップ 2: Next.js を静的エクスポート用に設定する

Capacitor は静的 HTML/JS/CSS ファイルが必要です。Next.js を静的エクスポート用に設定するには、 next.config.ts:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
  // Ensure trailing slashes for proper routing in Capacitor
  trailingSlash: true,
};

export default nextConfig;

これらの設定の理由は?

  • output: 'export' — 静的 HTML の生成に必要な Node.js サーバーを必要としない
  • images: { unoptimized: true } — サーバーが必要な場合、Next.js の画像最適化を無効にします。
  • trailingSlash: true — ネイティブの WebView で正しいルーティングを確保します。

ステップ 3: モバイル スクリプトを追加します。

Update your 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 run build

モバイル用の静的ファイルが含まれるディレクトリを確認します。 out ステップ 4: __CAPGO_KEEP_0__ 8 をインストールします。

Capacitor のコア パッケージをインストールします。

Capacitor の基本的なプラグインをインストールします。これらのプラグインはほとんどのモバイル アプリに必要です。

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

これらのプラグインの機能は何ですか?

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

これらのプラグインはほとんどのモバイル アプリに必要です。

  • @capacitor/app — フォアグラウンド/バックグラウンドのアプリライフサイクルイベント (ディープリンク)
  • @capacitor/keyboard — キーボードの動作を制御
  • @capacitor/splash-screen — ネイティブのスプラッシュスクリーンを制御
  • @capacitor/status-bar — デバイスのステータスバーをスタイル化
  • @capacitor/preferences — キー値の保存 (localStorage と同様のネイティブの保存)

Step 5: Capacitor を初期化する

Capacitor をプロジェクトの詳細と初期化する: 

bunx cap init "My Mobile App" com.example.mymobileapp --web-dir out

置き換え:

  • "My Mobile App" あなたのアプリの表示名に
  • com.example.mymobileapp あなたのアプリID (逆ドメイン記法)

これにより capacitor.config.tsを更新してプラグインの設定:

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

const config: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: 'out',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    StatusBar: {
      style: 'light',
    },
  },
};

export default config;

ステップ 6:ネイティブプラットフォームを追加

プラットフォームパッケージをインストール:

bun add @capacitor/ios @capacitor/android

ネイティブプロジェクトを生成:

bunx cap add ios
bunx cap add android

これにより ios 、 android ディレクトリを含むネイティブプロジェクト。

ステップ 7:ビルドと実行

プロジェクトをビルドし、ネイティブプラットフォームと同期する:

bun run mobile

iOS シミュレータで開く:

bun run mobile:ios

または Android エミュレータで開く:

bun run mobile:android

Xcode (iOS) で:

  1. デバイス ドロップダウンからシミュレータを選択
  2. プレイ ボタンをクリックまたは Cmd + R

Android Studio で:

  1. Gradle の同期が完了するのを待つ
  2. デバイス ドロップダウンからエミュレータを選択
  3. 実行ボタンをクリックまたは Shift + F10

__CAPGO_KEEP_0__

8. ステップ: ライブ リロードを設定する

  1. ローカルIPアドレスを探す:
# macOS
ipconfig getifaddr en0

# Windows
ipconfig
  1. 開発用のCapacitor設定を作成します。追加する capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';

const devConfig: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: 'out',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... same plugin config
  },
};

const prodConfig: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: 'out',
  plugins: {
    // ... same plugin config
  },
};

const config = process.env.NODE_ENV === 'development' ? devConfig : prodConfig;

export default config;
  1. デバッグサーバーを起動し、設定をネイティブにコピーする
bun run dev &
NODE_ENV=development bunx cap copy
  1. Xcode/Android Studioで再構築

現在、Next.js codeの編集はデバイス上で即時反映されます。

ステップ9:最初のモバイル画面を作成する

シンプルでモバイルフレンドリーなホーム画面を作成しましょう。更新 src/app/page.tsx:

'use client';

import { useEffect, useState } from 'react';
import { App } from '@capacitor/app';
import { Keyboard } from '@capacitor/keyboard';

export default function Home() {
  const [appInfo, setAppInfo] = useState<{ name: string; version: string } | null>(null);

  useEffect(() => {
    // Get app info on mount
    App.getInfo().then(setAppInfo).catch(console.error);

    // Handle back button on Android
    const backHandler = App.addListener('backButton', ({ canGoBack }) => {
      if (!canGoBack) {
        App.exitApp();
      } else {
        window.history.back();
      }
    });

    // Hide keyboard when tapping outside inputs
    const keyboardHandler = Keyboard.addListener('keyboardWillShow', () => {
      document.body.classList.add('keyboard-open');
    });

    return () => {
      backHandler.then(h => h.remove());
      keyboardHandler.then(h => h.remove());
    };
  }, []);

  return (
    <main className="min-h-screen bg-linear-to-b from-blue-500 to-blue-700 flex flex-col items-center justify-center p-6 text-white">
      <h1 className="text-4xl font-bold mb-4">My Mobile App</h1>
      <p className="text-xl mb-8 text-center opacity-90">
        Built with Next.js 15 + Capacitor 8
      </p>

      {appInfo && (
        <div className="bg-white/20 rounded-lg p-4 backdrop-blur-sm">
          <p className="text-sm">
            {appInfo.name} v{appInfo.version}
          </p>
        </div>
      )}

      <div className="mt-12 space-y-4 w-full max-w-sm">
        <button className="w-full py-4 px-6 bg-white text-blue-600 rounded-xl font-semibold text-lg shadow-lg active:scale-95 transition-transform">
          Get Started
        </button>
        <button className="w-full py-4 px-6 bg-white/20 text-white rounded-xl font-semibold text-lg backdrop-blur-sm active:scale-95 transition-transform">
          Learn More
        </button>
      </div>
    </main>
  );
}

ステップ10:セーフエリアハンドリングを追加する

モバイルデバイスにはノッチ、ホームインジケータ、ステータスバーがあります。セーフエリアハンドリングをTailwindで追加する

更新 src/app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

body {
  padding-top: var(--sat);
  padding-right: var(--sar);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
}

/* Prevent text selection on mobile */
* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Allow text selection in inputs */
input, textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

/* Keyboard handling */
.keyboard-open {
  --sab: 0px;
}

プロジェクト構造

プロジェクトは次のようになります:

my-mobile-app/
├── android/              # Android native project
├── ios/                  # iOS native project
├── out/                  # Static build output
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── ...
├── capacitor.config.ts   # Capacitor configuration
├── next.config.ts        # Next.js configuration
├── package.json
└── ...

次のステップ

あなたは機能するNext.jsモバイルアプリを持っています。ここでは何をするかを説明します:

基本設定

  • アプリアイコン: デフォルトのアイコンを ios/App/App/Assets.xcassets と android/app/src/main/res
  • スプラッシュスクリーン: ネイティブプロジェクトでカスタマイズするか、 @capacitor/splash-screen config
  • ディープリンク: あなたのアプリのURLスキームを設定する

機能を追加する

  • カメラ: bun add @capacitor/camera
  • 位置情報: bun add @capacitor/geolocation
  • プッシュ通知: bun add @capacitor/push-notifications
  • ファイルシステム: bun add @capacitor/filesystem

UI向上

追加で考慮する Konsta UI ネイティブiOS/Androidコンポーネントの見た目の向上のために:

bun add konsta

オーバー・ザ・エア更新

設定 Capgo アプリストアの再提出なしで更新をプッシュするために:

bunx @capgo/cli init

トラブルシューティング

「モジュールが見つかりません」というエラーでビルドが失敗します 実行 bun install 再度実行してみてください。

iOS: 「署名のアイデンティティが見つかりません」 Xcodeを開き、Signing & Capabilitiesに移動し、開発チームを選択してください。

Android: 「SDK」の場所が見つかりません 作成 android/local.properties と sdk.dir=/path/to/android/sdk

デバイスに表示されない変更 変更を実行した後、確かに「__CAPGO_KEEP_0__」を実行したことを確認してください。ライブリロードの場合、IPアドレスが正しいかどうかと、開発サーバーが実行中かどうかを確認してください。 bun run mobile Changes not appearing on device

リソース

アプリを配信する準備ができましたか？ Capgo が、更新を迅速に配信する方法を学びましょう — 無料アカウントに登録する 今日。

Live updates for Capacitor apps

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

バーターコンターを定事を抄書がそす

最新のブログ記事

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

Capacitor アプリの2方向のコミュニケーション
開発、モバイル、更新
2025年4月26日

Capacitor アプリの2方向のコミュニケーション

__CAPGO_KEEP_0__ アプリのOTA更新の5つの一般的なミス
開発、セキュリティ、更新
2025年4月13日

__CAPGO_KEEP_0__ アプリのOTA更新の5つの一般的なミス

モバイルアプリライブアップデートの5つのセキュリティベストプラクティス
開発、モバイル、更新
2025年1月14日

モバイルアプリライブアップデートの5つのセキュリティベストプラクティス

ブログからすべてを参照