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

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.

Martin Donadieu

Martin Donadieu

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

Introduction

Have an existing Next.js web application? In this guide, you’ll learn how to transform it into native iOS and Android mobile apps using Capacitor 8 — the latest version with improved performance and new features.

Capacitor は、ウェブアプリをネイティブのコンテナにラップすることで、カメラ、ファイルシステム、プッシュ通知などのデバイスAPIにアクセスできるようになります。既存のReactコードベースを変更する必要はありません — そのまま、Next.js code が実行されます。

学習すること:

  • 既存のNext.jsアプリを静的エクスポート用に設定する
  • Capacitor 8 に必要なネイティブのプラグインを追加する
  • iOSとAndroidのシミュレータでビルドおよびテストする
  • 開発を高速化するためにライブリロードを有効にする
  • iOSの一般的なレイアウト問題 (ビュー ポート、セーフ エリア、水平オーバーフロー) を修正する
  • Capgo Native NavigationとTransitions を使用してネイティブに感じるUIを追加する

新しいプロジェクトから始めることを検討している場合は、 Next.jsモバイルアプリを作成するためのガイドを参照してください.

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

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

Prerequisites

開始する前に、以下を確認してください。

  • 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;

The output: 'export' setting は Next.js に、静的 HTML ファイルを生成するように指示します。 images: { unoptimized: true } Next.js の画像最適化を回避します。これにはサーバーが必要です。

注意: サーバーが必要な機能（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__ がネイティブ アプリにパッケージ化する際に使用する静的ファイルがすべて含まれるディレクトリをプロジェクトの root に見つけることができます。 out Capgo に Capacitor を追加する

Adding Capacitor 8 to Your Project

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

  1. Install Capacitor core and CLI:
bun add @capacitor/core
bun add -D @capacitor/cli
  1. Capacitor 8 をプロジェクトに追加する
bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/preferences

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

  • @capacitor/appアプリライフサイクルイベントをハンドル（前景/背景、URL）
  • @capacitor/keyboardモバイルデバイス上のキーボードの挙動を制御
  • @capacitor/splash-screenネイティブのスプラッシュスクリーンを管理
  • @capacitor/preferencesキー値データを永続的に保存
  1. CapgoプロジェクトをCapacitorで初期化するには、プロジェクトの詳細を指定してください:
bunx cap init my-app com.example.myapp --web-dir out

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

  1. アプリを作成または更新します。 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 が必要です。 ネイティブプラットフォームのインストールに必要なものは、インストールしたプラットフォームのネイティブ SDK とプラットフォームのネイティブ CLI です。ネイティブプラットフォームのインストールに必要なものは、インストールしたプラットフォームのネイティブ SDK とプラットフォームのネイティブ CLI です。 ネイティブプラットフォームのインストールに必要なものは、インストールしたプラットフォームのネイティブ SDK とプラットフォームのネイティブ CLI です。.

  1. プロジェクトをビルドして同期する:
bun run mobile

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

ネイティブ アプリのビルドとデプロイ

ネイティブ モバイル アプリをビルドおよびデプロイするには、次の手順に従ってください。 iOS アプリを開発するには、 Xcode がインストールされている必要があります。また、Android アプリを開発するには、 Android Studio

  1. がインストールされている必要があります。さらに、アプリをアプリ ストアで配布する場合、iOS では Apple Developer Program に登録し、Android では Google Play Console に登録する必要があります。

ネイティブ プロジェクトを開く:

bun run mobile:ios

iOS の場合:

bun run mobile:android

Android の場合、または直接 Capacitor CLI で開く:

bunx cap open ios
bunx cap open android
  1. Build and run the app:

android-studio-run

  • Android Studioでプロジェクトが準備できたら、実機またはエミュレータにアプリをデプロイするために「Run」ボタンをクリックしてください。 xcode-run

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

Congratulations! Next.jsのウェブアプリをモバイルデバイスに成功でデプロイしました。

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

Capacitor Live Reload

開発中は、モバイルデバイスで即時反映できるLive Reload機能を利用してください。Live Reload機能を有効にするには、以下の手順に従ってください:

  1. IPアドレスを確認してください:

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

    ipconfig getifaddr en0

  • Windows上で実行します。

    ipconfig

    出力に表示されるIPv4アドレスを探します。

  1. を更新してください。 capacitor.config.ts を開発サーバーに指すように設定してください。
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;

を YOUR_IP_ADDRESS のローカルIPアドレス (例えば、 192.168.1.100).

  1. の変更をアプリケーションに反映させるには、以下の手順を実行してください。
bunx cap copy

コマンドは、Webフォルダと構成の変更をネイティブプロジェクトにコピーし、プロジェクト全体を更新するのではなく、変更を反映させます。 copy Android StudioまたはXcodeを使用して、デバイス上でアプリケーションを再構築して実行してください。

  1. Next.jsアプリケーションに変更を加えた場合、モバイルアプリケーションは自動的に再読み込みされ、変更を反映させます。

注: プラグインを新規にインストールしたり、ネイティブファイルに変更を加えた場合、ネイティブプロジェクトを再構築する必要があります。ライブリロードはWebの変更にのみ適用されます。

code

Capacitor プラグインを使用する

Capacitor プラグインは、Next.js アプリからネイティブ デバイス機能にアクセスできるようにします。Share プラグインを使用してみましょう。 Share プラグイン Share プラグインをインストールする

  1. Share プラグインを使用するファイルを更新する
bun add @capacitor/share
  1. Share プラグインとネイティブ プロジェクトを同期する pages/index.js インストールした新しいプラグインの場合、同期操作を実行し、再度アプリをデバイスにデプロイする必要があります。次のコマンドを実行してください。
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

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

bunx cap sync
  1. __CAPGO_KEEP_0__ プラグインを使用する

__CAPGO_KEEP_0__ プラグインは、Next.js アプリからネイティブ デバイス機能にアクセスできるようにします。Share プラグインを使用してみましょう。

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

数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、Next.jsと統合することはハック的で、Next.js + __CAPGO_KEEP_0__アプリケーションですでに持っているTailwind CSS 4と比較してほとんど価値がありません。 For a native mobile feel in a Next.js + __CAPGO_KEEP_0__ app, use __CAPGO_KEEP_1__ plugins instead of web-only UI kits like Konsta UI: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation — iOSではLiquid Glassタブバー、Androidではブラーしたタブバーのスタイルが使用されます。Next.jsルーターはルートの状態を保持し、プラグインはネイティブのブラウザを管理します。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions — WebViewレイヤーでIonicスタイルのページトランジションとiOSのエッジスワイプバックが実行されますが、IonicのUIを採用する必要はありません。 Install both:.

@Capacitor/Capgo-native-navigationと@Capacitor/Capgo-transitionsをインストールしてください。

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigationと@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitionsをインストールしてください。

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

液体ガラスのタブバーをレンダリングします (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}`);
});

アプリのシェルでネイティブのページトランジションを追加します:

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

initTransitions({ platform: 'auto' });

ルーティングされたページを cap-router-outlet, cap-page, cap-content, setDirection('forward') , setDirection('back') と呼びます。 router.push() または router.back()前に

または Using @capgo/capacitor-native-navigation と @capgo/capacitor-トランジションを使用します.

安全なエリアにタイルウィンド

デバイスの安全なエリアをTailwind CSSで使用するには @capgo/tailwind-capacitor (公開された tailwind-capacitor npmで。 safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

ユーティリティとその他の__CAPGO_KEEP_0__-対応のタイルウィンドプラグイン: styles/globals.css:

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

In pt-safe, pb-safeユーティリティを使用する px-safe 、と env(safe-area-inset-*) 手作り。プロジェクトは積極的に開発されています — 使いたいNext.jsの設定で何か不足している場合、 GitHubにPRを開く.

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

iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるように見える場合、 overflow-x: hidden またはビューポートタグを調整するだけでは通常解決しません。順序に従ってこれらのチェックを実行してください。

ビューポートメタタグが正しく適用されていることを確認する

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

import type { Viewport } from 'next';

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

Pages Router (pages/ビューポートメタタグを pages/_app.tsx、ではなく _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_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor__CAPGO_KEEP_0__ iOS pt-safe pb-safe px-safe セーフエリアを設定する:

Capacitor を iOS contentInset セーフエリアに設定する: never targetLanguage":"Japanese"

protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"] capacitor.config.tstexts":["first","In","","nativeのインセットを無効にして、CSS（またはNative Navigationの") contentInsetMode: 'css'safe areaをCSS（またはNative Navigationの")

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

Mixing Capacitorの自動コンテンツインセットとCSSの env(safe-area-inset-*) paddingは、ダブルスペースの原因となる一般的な問題です。

Find the real overflowing element

通常の原因は、 100vwTailwind w-screenfixed pixel width、または大きい min-width.

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

With Tailwind、置き換えます w-screen __CAPGO_KEEP_0__の場合、可能な限り多くの水平オーバーフロー問題は、安全エリアの重複パディングまたは固定幅のコンテナから来ていますが、viewport メタタグ自体ではありません。 w-full パフォーマンス最適化 100vw / w-screen__CAPGO_KEEP_0__のNext.jsアプリの最適なパフォーマンスを確保するには、以下のベストプラクティスを考慮してください。

不要な依存関係やアセットを削除してアプリサイズを最小化すること。

To ensure optimal performance of your Next.js and Capacitor app, consider the following best practices:

  • コンポーネントやページの初期ロードパフォーマンスを向上させるために、遅延ロードを実装すること。
  • Next.jsを使用して、検索エンジン最適化（SEO）とロード速度を向上させるためにサーバーサイドレンダリング（SSR）を実装すること。
  • __CAPGO_KEEP_0__の組み込み最適化機能、例えばウェブビューのキャッシュとアプリバンドリングを活用すること。
  • 結論
  • 既存のNext.jsウェブアプリケーションをCapacitor 8を使用してiOSおよびAndroidアプリに変換しました。ウェブコードベースは、デバイスAPIにアクセスできるモバイルデバイス上でネイティブに実行されます。

__CAPGO_KEEP_0__

Capacitor

あなたの実績：

  • 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 プラグイン ディレクトリの製品ワークフローで for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__ プラグイン __CAPGO_KEEP_1__ プラグインの追加または更新 プラグインの追加または更新 Capgo Native Builds for the product workflow in Capgo Native Builds.

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

ウェブ層のバグが生じた場合、Capgoを通じて修正を配信し、App Storeの承認待ちの日数を待たずに。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路で残る。

今すぐ始める

最新のブログ記事

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

2-Way Capacitorアプリ間の双方向通信
開発 モバイル +1
2025年4月26日

2-Way Capacitorアプリ間の双方向通信

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

5つのOTA更新の誤りを避ける

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

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

ブログからすべてを参照