メインコンテンツにジャンプ
Capgoロゴ
Tutorial

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

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

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

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

コンテンツマーケター
Capacitor 8を使ってNext.jsモバイルアプリを作成する

導入

Next.jsからモバイルアプリを作成したい場合は、このガイドをご覧ください。Next.js 15プロジェクトを作成し、モバイル向けに設定し、__CAPGO_KEEP_0__ 8を使用してiOSおよびAndroidアプリにパッケージ化します。 Capacitor 8.

このチュートリアルを終了すると、シミュレータ上で動作するモバイルアプリを開発し、最終的にApp StoreとGoogle Playに公開することができます。

所要時間: ~30分

作成するもの:

  • Next.js 15アプリケーションを作成し、App Routerを使用します。
  • モバイル用の静的エクスポート設定
  • Capacitor 8に必要なプラグインを含む
  • ネイティブiOSおよびAndroidアプリ
  • ライブリロード開発環境

既存のNext.jsアプリを持っていますか? 以下をご確認ください。 Next.jsアプリをモバイルに変換する それに。

前提条件

__CAPGO_KEEP_0__をインストールしていることを確認してください:

  • Node.js 18以上 (確認する node --version)
  • Bun パッケージマネージャー (curl -fsSL https://bun.sh/install | bash)
  • Xcode (macOSのみ、iOS開発用)
  • Android Studio (Android開発用)

ステップ 1: 新しい Next.js プロジェクトを作成する

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

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

質問に答える際に、次のオプションを選択してください:

  • TypeScript: Yes (recommended)
  • ESLint: Yes
  • Tailwind CSS: Yes (recommended for mobile styling)
  • src/ directory: Yes
  • App Router: Yes (recommended)
  • 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' — Node.js サーバーが必要なくても静的 HTML を生成する
  • images: { unoptimized: true } — Next.js の画像最適化を無効にする (サーバーが必要)
  • trailingSlash: true — ネイティブ WebView で正しいルーティングを確保する

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

モバイル開発用のスクリプトを更新してください: 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

You should see an out 静的ファイルのディレクトリ。

ステップ 4: Capacitor 8 をインストールする

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 と同様のネイティブ)

ステップ 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: ビルドと実行

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

iOS シミュレータで開く:

bun run mobile

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

bun run mobile:ios

Xcode (iOS) で:

bun run mobile:android

デバイスドロップダウンからシミュレータを選択する

  1. プレイボタンをクリックするか
  2. Android Studio で: Cmd + R

In Android Studio:

  1. Gradleの同期が完了するのを待ってください
  2. デバイスのドロップダウンからエミュレータを選択してください
  3. RunボタンをクリックするかCtrl+Rを押してください Shift + F10

ステップ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.jscodeの編集は、デバイスで即時リロードされます

ステップ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
└── ...

次のステップ

Capacitor Next.jsモバイルアプリが正常に動作していることを確認しました。ここでは何を実行するかを説明します。

基本設定

  • アプリアイコン: デフォルトのアイコンを ios/App/App/Assets.xcassets と android/app/src/main/res
  • スプラッシュスクリーン: ネイティブプロジェクトでカスタマイズするか、使用 @capacitor/splash-screen __CAPGO_KEEP_0__
  • Deep Links: __CAPGO_KEEP_0__

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

トラブルシューティング

ビルドが「モジュールが見つかりません」というエラーで失敗します Run bun install そしてもう一度試してください。

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

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

デバイス上で表示されない変更 変更が表示されない場合は、変更を加えた後、次のことを確認してください。ライブリロードの場合、IPアドレスが正しいかどうかと、開発サーバーが実行中かどうかを確認してください。 bun run mobile リソース

__CAPGO_KEEP_0__ 8 ドキュメント

Ready to ship your app? Learn how Capgo can help you deliver updates faster — 変更を保存した後、デバイスに反映されない場合は、IPアドレスが正しいかどうかと、開発サーバーが実行中かどうかを確認してください。 今日。

Capacitor アプリのリアルタイム更新

ウェブ層のバグが生じた場合、Capgo を使用して修正を配信するのではなく、数日間待ってアプリストアの承認を待つのではなく、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路で残ります。

スタートする

ブログの最新記事

Capgo を使用すると、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を得ることができます。

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

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

5つのOTA更新ミスを避けることの重要性
開発、セキュリティ、更新
2025年4月13日

5つのOTA更新ミスを避けることの重要性

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

モバイルアプリライブ更新のための5つのセキュリティベストプラクティス

ブログからすべての記事を参照