メインコンテンツにスキップ
Capgo logo
チュートリアル

Convert Your Next.js App to iOS & Android with Capacitor 8

Transform your existing Next.js 15 web application into native iOS and Android mobile apps using Capacitor 8. A complete guide to configuring static export, adding native plugins, and deploying to app stores.

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

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

コンテンツマーケター
Convert Your Next.js App to iOS & Android with Capacitor 8

導入

既存のNext.js Webアプリケーションを持っていますか? このガイドでは、ネイティブiOSおよびAndroidモバイルアプリケーションに変換する方法を学びます。 Capacitor 8 — 最新バージョンでパフォーマンスが向上し、新機能が追加されています。

Capacitorは、カメラ、ファイルシステム、プッシュ通知などのデバイスAPIにアクセスできるネイティブコンテナで、既存のReactコードベースを保持します。React Nativeとは異なり、既存のNext.jscodeはそのまま動作します。

学習すること:

  • 既存のNext.jsアプリを静的エクスポート用に設定する
  • Capacitor 8にエッセンシャルなネイティブプラグインを追加する
  • iOSとAndroidのシミュレータでビルドしてテストする
  • 開発を高速化するためにライブリロードを有効にする
  • iOSの一般的なレイアウト問題（ビューポート、セーフエリア、水平オーバーフロー）を修正する
  • Capgoネイティブナビゲーションとトランジションを使用してネイティブフィーリングのUIを追加する

新しいプロジェクトから始めるには、以下のガイドを参照してください。 Next.jsモバイルアプリをゼロから構築する.

Next.jsとCapacitorの使用による利点

  • Codeの再利用性: Next.js を使用すると、再利用可能なコンポーネントを書くことができ、Web アプリとモバイル アプリ間で code を共有できます。これにより、開発時間と労力の節約が可能になります。
  • パフォーマンス: Next.js には、サーバーサイド レンダリングと code スプリッティングなどのパフォーマンス最適化機能が組み込まれています。これにより、高速なロード時間と滑らかなユーザー エクスペリエンスが実現します。
  • ネイティブ機能: Capacitor を使用すると、カメラ、位置情報、など、ネイティブ デバイス機能にアクセスできます。これにより、機能豊富なモバイル アプリを構築できます。
  • 簡素化された開発: Capacitor を使用すると、モバイル アプリを開発およびテストするために、熟知している Web テクノロジーを使用できます。これにより、学習曲線の低減と開発プロセスのstreamliningが実現します。

前提条件

: まず、以下の条件を確認してください。

  • Node.js 18+ インストール済み
  • 既存の Next.js 15+ アプリケーション
  • Xcode (iOS開発用、macOSのみ)
  • Android Studio (Android開発用)

Next.jsアプリをモバイル向けに設定する

最初のステップは、Next.jsアプリを静的エクスポート用に設定することです。Capacitorは、静的HTML/JS/CSSファイルをネイティブアプリにバンドルする必要があります。

ファイルを開いて next.config.js (または next.config.ts)

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

ファイル output: 'export' __CAPGO_KEEP_0__を設定すると、Next.jsは静的HTMLファイルを生成し、 images: { unoptimized: true } __CAPGO_KEEP_0__の画像最適化を回避するため、サーバーが必要です。

重要: サーバーが必要な機能を使用している場合 (APIルート、データフェッチを含むサーバーコンポーネントなど)、クライアントサイドの代替または外部APIを使用する必要があります。

モバイル用のスクリプトを追加します。 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

__CAPGO_KEEP_0__で生成される静的ファイルがすべて含まれるフォルダがプロジェクトのルートに表示されます。このフォルダには、ネイティブアプリにバンドルするために使用されるすべての静的ファイルが含まれます。 out Capacitor 8をプロジェクトに追加する

Adding Capacitor 8 to Your Project

__CAPGO_KEEP_0__コアと__CAPGO_KEEP_1__をインストールします。

  1. Install Capacitor core and CLI:
bun add @capacitor/core
bun add -D @capacitor/cli
  1. Install common Capacitor plugins you’ll likely need:
bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/preferences

これらのプラグインは、以下の機能を提供します:

  • @capacitor/app: アプリのライフサイクルイベントをハンドル (前景/背景、URL)
  • @capacitor/keyboard: モバイルデバイス上のキーボードの動作を制御
  • @capacitor/splash-screen: ネイティブのスプラッシュスクリーンを管理
  • @capacitor/preferences: キー値データを永続的に保存
  1. Initialize Capacitor with your project details:
bunx cap init my-app com.example.myapp --web-dir out

置き換え my-app アプリ名と com.example.myapp アプリID (逆ドメイン記法) を使用して。

  1. アプリID (逆ドメイン記法) を使用して。 capacitor.config.ts 適切な構成で「
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;
  1. ネイティブプラットフォームをインストールしてください。
bun add @capacitor/ios @capacitor/android
  1. ネイティブプラットフォームのフォルダをプロジェクトのルートに追加してください。
bunx cap add ios
bunx cap add android

Capacitor はプロジェクトのルートにネイティブプロジェクトを含むフォルダを作成します。 ios ネイティブプロジェクトのフォルダがプロジェクトのルートに作成されます。 android Android プロジェクトをビルドするには、Android Studio が必要です。

iOS プロジェクトをビルドするには、Mac に Xcode が必要です。 Android StudioXcode and.

  1. Nativeアプリを構築する
bun run mobile

このコマンドは、カスタムスクリプトを実行し、ネイティブプラットフォームと静的ファイルを同期するNext.jsプロジェクトをビルドします。

ネイティブアプリのビルドと配信

ネイティブモバイルアプリをビルドおよび配信するには、以下の手順に従ってください。 iOSアプリを開発するには、Xcodeがインストールされている必要があります。Androidアプリを開発するには、Android Studioがインストールされている必要があります。また、App Storeでアプリを配信する場合、iOSにはApple Developer Programに登録し、AndroidにはGoogle Play Consoleに登録する必要があります。 ネイティブプロジェクトを開く iOSの場合 Androidの場合

  1. または直接__CAPGO_KEEP_0__ __CAPGO_KEEP_1__で開く

build and sync your project:

bun run mobile:ios

This runs your custom script that builds the Next.js project and syncs the static files with the native platforms.

bun run mobile:android

Building and Deploying Native Apps: To build and deploy your native mobile app, follow these steps: To develop iOS apps, you need to have Xcode installed, and for Android apps, you need to have Android Studio installed. Moreover, if you plan to distribute your app on the app store, you need to enroll in the Apple Developer Program for iOS and the Google Play Console for Android. Open the native projects: For iOS: For Android: Or directly with Capacitor CLI:

bunx cap open ios
bunx cap open android
  1. アプリをビルドして実行する:

android-studio-run

  • Android Studioで、プロジェクトが準備できたら、実行ボタンをクリックして、接続したデバイスまたはエミュレータにアプリをデプロイします。 xcode-run

  • Xcodeで、実機にアプリをデプロイするために署名アカウントを設定してください。署名アカウントを設定することは初めての場合は、Xcodeがガイドを提供します (Apple Developer Programに登録している必要があります)。署名アカウントを設定したら、実機にアプリを実行するために「プレイ」ボタンをクリックしてください。

成功しました!

nextjs-mobile-app
しかし、開発中にはもっと速い方法があります...

Capacitor Live Reload

開発中は、実機で即座に変更を確認できるLive Reload機能を利用できます。この機能を有効にするには、以下の手順に従ってください。

  1. ローカルIPアドレスを探す:

  • macOSの場合、ターミナルで以下のコマンドを実行してください:

    ipconfig getifaddr en0

  • On Windows, run:

    ipconfig

    Windowsで実行します。

  1. Look for the IPv4 address in the output. capacitor.config.ts 出力に表示されるIPv4アドレスを探します。
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;

Update your YOUR_IP_ADDRESS 開発サーバーに接続する 192.168.1.100).

  1. to point to your development server:
bunx cap copy

開発サーバーに接続するには copy Replace

  1. に置き換えます。

with your local IP address (e.g.,

Note: If you install new plugins or make changes to native files, you’ll need to rebuild the native project since live reloading only applies to web code changes.

Capacitor プラグインを使用する

Capacitor プラグインは、Next.js アプリからネイティブ デバイスの機能にアクセスできるようにします。Next.js アプリで Share プラグインを使用する方法をご紹介します。 Share プラグイン Share プラグインを使用する例として、Share プラグインをご紹介します。

  1. Share プラグインをインストールする:
bun add @capacitor/share
  1. Share プラグインを使用するには、ファイルを更新する必要があります。 pages/index.js ファイルを更新して、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>
  );
}
  1. 変更をネイティブ プロジェクトと同期する:

インストールした新しいプラグインの場合、同期操作を実行し、再度アプリをデバイスにデプロイする必要があります。次のコマンドを実行してください。

bun run mobile

または、再構築せずに同期する:

bunx cap sync
  1. アプリを再構築し、デバイスに実行します。

「Share now!」ボタンをクリックすると、ネイティブの共有ダイアログが表示され、他のアプリと共有できます。

next-capacitor-share
次に、iOS と Android で Capgo ナビゲーションとトランジションを使用してアプリをよりネイティブに感じさせ、水平オーバーフローまたはカットオフされたセーフエリアを引き起こす可能性のあるiOSの一般的なレイアウト問題を修正できます。 ## ネイティブフィーリングのUIを作成するには、Capgoネイティブナビゲーションとトランジションを使用します

数年間、Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、Ionic を Next.js と統合することはハック的で、すでに Tailwind CSS 4 を使用している場合にはほとんど価値がありません。 ネイティブモバイルフィーリングを Next.js + __CAPGO_KEEP_0__ アプリに実現するには、Web のみの UI キットである Konsta UI よりも __CAPGO_KEEP_1__ プラグインを使用することをお勧めします。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation — iOS で液体ガラススタイルのタブバー、Android でぼやけたタブバースタイルのネイティブナビゲーションバー。Next.js ルーターはルート状態を保持し、プラグインはネイティブのブラウザを管理します。.

@Capacitor/Capgo-transitions

__CAPGO_KEEP_0__はCapacitorです。__CAPGO_KEEP_1__はNativeです。

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

ネイティブナビゲーションをCSSのインセットモードで設定して、ウェブコンテンツがネイティブのバーを尊重するようにします。

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Liquid Glass タブバーをレンダリングする（iOSではシステムがレンダリングを所有し、AndroidではぼやけたWebViewバックドロップを使用します）。

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

Capacitorを使用してNext.jsアプリにネイティブのページ遷移を追加します。

import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });

ページルーティングを実装したページを Wrap するには、Capacitor の Navigation API を使用します。 cap-router-outlet, cap-page、 cap-content、そして呼び出し setDirection('forward') または setDirection('back') 新機能に取り組む前に、問題を提起して議論しましょう。 router.push() または router.back()ウェブヘッダーまたはフッターをネイティブナビゲーションが所有する面に重複しないようにする。

See the full guides: @capgo/capacitor-ネイティブナビゲーション と @capgo/capacitor-transitions.

セーフエリア

デバイスのセーフエリアをTailwind CSSで使用するには @capgo/tailwind-capacitor (公開日 tailwind-capacitor npmで safe-areas 機能やその他のCapacitor対応のTailwindプラグインを提供します。

bun add -D tailwind-capacitor

In styles/globals.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

機能を使用する pt-safe, pb-safe、 px-safe の代わりに env(safe-area-inset-*) 手作. このプロジェクトは、Next.jsの設定用に欠けているものがあっても、積極的に開発されています。 GitHubにPRを提出してください。.

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, not _document.tsx （Next.jsは、ビューポートの動作に対するタグを期待どおりに適用しない場合があります。） _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を pt-safe pb-safe px-safe に設定すると、iOSのセーフエリアのパディングを1つのシェルに適用できます。

Set Capacitor iOS contentInset に設定します。 never first

In capacitor.config.ts, native UI のインセットを有効にし、CSS (または Native Navigation の) contentInsetMode: 'css') の安全エリアを管理する:

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

Capacitor の自動コンテンツインセットと CSS のパディングを組み合わせると、通常はダブルスペースが発生する。 env(safe-area-inset-*) 実際にオーバーフローしている要素を探す

通常の原因は、

, Tailwind 100vw, 固定ピクセル幅、または大きい w-screenSafari Web インスペクターで実行: min-width.

Tailwind の場合、

[...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,
  }));

With w-screen with w-full when possible. Many horizontal overflow issues come from 100vw / w-screen, duplicated safe-area padding, or a fixed-width container — not from the viewport meta tag itself.

パフォーマンス最適化

Next.jsとCapacitorアプリの最適なパフォーマンスを確保するには、以下のベストプラクティスを考慮してください。

  • 未使用の依存関係やアセットを削除してアプリサイズを最小化する。
  • 画像や他のメディアファイルを最適化してロード時間を短縮する。
  • コンポーネントやページのロードを遅延させることで初期ロードパフォーマンスを向上させる。
  • Next.jsを使用してサーバーサイドレンダリング（SSR）を実装してアプリのロード速度と検索エンジン最適化（SEO）を向上させる。
  • Capacitorの組み込み最適化機能、例えばウェブビューのキャッシュとアプリバンドリングを活用する。

結論

既存のNext.jsウェブアプリケーションをCapacitor 8を使用してiOSとAndroidアプリに変換しました。ウェブコードベースは、デバイスAPIにアクセスできるモバイルデバイス上で動作します。

あなたが達成したこと:

  • Next.jsを静的エクスポート用に設定しました。
  • Capacitor 8に必須のプラグインを追加しました。
  • iOSとAndroidのシミュレータにビルドおよびデプロイしました。
  • 開発用にライブリロードを有効にしました。
  • 一般的なiOSレイアウト問題（ビュー ポート、セーフ エリア、オーバーフロー）を修正しました。
  • Capgo Native NavigationとTransitionsを使用してネイティブフィーリングのUIを追加しました。

次のステップ:

  • セットアップ Capgo オーバー・ザ・エア更新のためにアプリストアの再提出を回避
  • カメラ、位置情報、またはプッシュ通知などのネイティブプラグインを追加する
  • プロダクション用にアプリアイコンとスプラッシュスクリーンを設定
  • アプリをApp StoreとGoogle Playに提出するためにアプリを準備

新しいプロジェクトから始める場合は Next.jsモバイルアプリの作成から ガイド付きウォークスルーをチェックしてください。

リソース

Capgo を使うことで、より良いアプリをより速く作ることができます。 無料アカウントに登録する 今日

Capacitor 8 を使って、Next.js アプリを iOS &amp; Android に変換する

あなたが __CAPGO_KEEP_0__ を使っている場合 Capacitor 8 を使って、ネイティブ プラグインの作業を計画する __CAPGO_KEEP_0__ プラグイン ディレクトリと接続する Capgo プラグイン ディレクトリの製品ワークフロー Capgo Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, プラグインの追加または更新 __CAPGO_KEEP_0__ プラグインの実装詳細 イオニック エンタープライズ プラグインの代替 __CAPGO_KEEP_0__ ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフロー 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.

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

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

ページ/エリア: Capgo マーケティング ウェブサイト。役割: ショート UI ラベルまたはナビゲーションアイテム。見つかった場所: コンポーネント GetStarted.astro。メッセージキー: get_started_now (Get Started Now)。

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

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

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

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

5つのOTAアップデートのミスを避ける

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

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

Capgoのブログからすべてをご覧ください