メインコンテンツにジャンプする
Capgo logo
チュートリアル

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

ステップごとに、Capacitor 8を使ってNext.js 15プロジェクトを作成し、iOSとAndroidモバイルアプリに変換する方法を紹介します。モバイルファースト開発を始めるのに最適です。

記事のクレジット

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

ページ/エリア: Enterprise製品/価格設定ページ。役割: UIラベル。見つかったページ: page enterprise.astro。メッセージキー `enterprise_partnership_capgo_martin_name` (Enterprise Partnership Capgo Martin Name)。

ライター

バレリア

ページ/エリア: Enterprise製品/価格設定ページ。役割: UIラベル。見つかったページ: page enterprise.astro。メッセージキー `enterprise_partnership_capgo_valeria_name` (Enterprise Partnership Capgo Valeria Name)。

レビュアー

Build a Next.js Mobile App from Scratch with Capacitor 8

Introduction

Next.jsモバイルアプリをゼロから作りたい? Capacitor 8.

CapgoのLive Update Platform Capacitor

このチュートリアルを終了すると、シミュレータ上で動作するワークイングモバイルアプリを手に入れ、開発を続け、最終的にApp StoreとGoogle Playに公開することができます。 Time required:

~30分

  • What you’ll build:
  • 新しいNext.js 15プロジェクト
  • Capacitor 8 with essential plugins
  • __CAPGO_KEEP_0__ 8
  • エッセンシャルプラグインを含むモバイルアプリ向けの設定

既に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: はい（推奨）
  • ESLint: はい
  • Tailwind CSS: はい（モバイルスタイリングの推奨）
  • src/ ディレクトリ: はい
  • App Router: Yes (recommended)
  • Import alias: Default (@/*)

Navigate to your project:

cd my-mobile-app

Step 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で正しいルーティングが保証される

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

Capgoをアップデート 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 8 をインストール

Step 4: Install Capacitor 8

Install the Capacitor core packages:

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

これらのプラグインは何を実行するか:

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

Capgo/app

  • @capacitor/app Capgo/keyboard
  • @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__CAPGO_KEEP_0__を更新してプラグインの構成を追加してください

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

In Xcode (iOS):

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

In Android Studio:

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

Step 8: Live Reloadの設定

開発のために、変更が即座にデバイスに表示されるように、ライブリロードを有効にします。

  1. ローカルIPアドレスを探してください:
# macOS
ipconfig getifaddr en0

# Windows
ipconfig
  1. 開発用のCapacitor設定を作成してください。Add to 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
└── ...

次のステップ

コンテキスト: Capgo Builder / ネイティブクラウドビルド製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `native_build_builder_credit_next` (ネイティブビルドビルダークレジットネクスト)。

モバイル用のNext.jsアプリが動作するようになりました。ここでは何を次に実行するかを紹介します。

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

機能を追加する

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

ネイティブUIとトランジション

Capgo プラグインを使用するのではなく、Konsta UIの代わりにネイティブモバイルのフィールを実現する:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

タイルウィンドのセーフエリアを追加するには @capgo/tailwind-capacitor:

bun add -D tailwind-capacitor

参照 Using @capgo/capacitor-native-navigation, Using @capgo/capacitor-transitions, そして tailwind-capacitor リポジトリ Next.js用の設定については

iOSレイアウトの問題を修正する (ビューポート、セーフエリア、水平オーバーフロー)

iOSでコンテンツがカットされた、ずれた、または水平方向にスクロールできるように見えている場合、ビューポートタグを追加したり変更したりするだけでは通常解決しません。次のチェックを順番に実行してください。 overflow-x: hidden ビューポートメタタグが正しく適用されていることを確認する

App Router

export (app/from viewport Pages Router app/layout.tsx:

import type { Viewport } from 'next';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  viewportFit: 'cover',
};

ビューポートメタタグを (pages/ここに pages/_app.tsx、 _document.tsx.

iOS セーフエリアを 1 つのルートラッパーからのみ管理する

アプリシェルを 1 つ作成し、そのシェルにセーフエリアのパディングを適用する — 複数のネストされたコンポーネントにパディングを適用するのではなく:

html,
body,
#__next {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

すべてのページコンテンツを .app-shell. セーフエリアのパディングがヘッダー、モーダル、レイアウトラッパーに複数回適用されることがあるため、UI がカットされたように見えるか、サイズが大きすぎるように見えることがある。

で、 @capgo/tailwind-capacitorを使用すると、同じパディングを 1 つのシェルに適用できます。 pt-safe pb-safe px-safe __CAPGO_KEEP_0__ iOS

Set Capacitor iOS contentInset context: "Page/area: Live updates product page. Role: Short UI label or navigation item. Message key `live_update_dynamic_label_to` (Live Update Dynamic Label To)." never に設定します

In capacitor.config.ts, contentInsetMode: 'css'nativeのインセットを無効にして、CSS (またはNative Navigationの

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'out',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) __CAPGO_KEEP_0__の自動コンテンツインセットとCSSのパディングを組み合わせると、通常のスペースの倍増が原因となることがよくあります。

実際にオーバーフローしている要素を探します。

通常の原因は、 100vwTailwind w-screen、固定ピクセル幅、または大きい min-width.

Safari Web Inspectorで実行します。

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Tailwindの場合、 w-screen に置き換えます。 w-full 可能な限り。多くの水平オーバーフロー問題は、安全エリアの重複パディングや固定幅のコンテナから生じることが多い — 画面幅のメタタグ自体ではなく。 100vw / w-screenオーバー・ザ・エア更新

設定

__CAPGO_KEEP_0__ Capgo トラブルシューティング

bunx @capgo/cli init

ビルドが「モジュールが見つかりません」というエラーで失敗します。

実行 再試行してください。 bun install iOS: 「署名のアイデンティティが見つかりません」

Xcodeを開き、Signing &amp; Capabilitiesに移動し、開発チームを選択してください。 context

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

デバイスに表示されない変更 変更が反映されない場合は、以下を確認してください。 bun run mobile 変更を保存した後、以下のコマンドを実行してください。

ライブリロードの場合、IPアドレスが正しく、開発サーバーが実行されていることを確認してください。

@Capgo/Capacitorから始める アプリを配信する準備ができましたか? __CAPGO_KEEP_0__ を使用して、更新を迅速に配信する方法を学びましょう — 無料アカウントに登録する

Keep going from Build a Next.js Mobile App from Scratch with Capacitor 8

続けてください。Next.jsモバイルアプリケーションから始める Build a Next.js Mobile App from Scratch with Capacitor 8 あなたが使用している Capgo CI/CD for the product workflow in Capgo CI/CD, CI/CD自動化を計画する場合、Capgo CI/CD Capgo CI/CDの製品ワークフローに接続する Capgo 連携 Capgo 連携の製品ワークフロー CI/CD 連携 CI/CD 連携の実装詳細 GitHub アクション連携 GitHub アクション連携の実装詳細

ライブ更新の Capacitor アプリ

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

マーティンから人間のサポート

Get Started Now

最新のブログ記事

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

2-Way Communication in Capacitor Apps
開発 モバイル +1
2025年4月26日

Capacitorアプリの2方向通信

OTA更新の5つの一般的なミスを避ける
開発 セキュリティ +1
2025年4月13日

OTA更新の5つの一般的なミスを避ける

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

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

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