Skip to main content
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コードベースを保持します。React Nativeとは異なり、codeのNext.jsは既存のまま動作します。

What you’ll learn:

  • 既存のNext.jsアプリを静的エクスポート用に設定する
  • Capacitor 8にエッセンスのネイティブプラグインを追加する
  • iOSとAndroidのシミュレータでビルドしてテストする
  • 開発を高速化するためのライブリロードを有効にする
  • iOSの一般的なレイアウト問題を解決する(ビューポート、セーフエリア、水平オーバーフロー)
  • Capgo Native NavigationとTransitionsを使用してネイティブフィーリングの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 } 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__を実行すると、 out プロジェクトのルートディレクトリにフォルダが作成されます。このフォルダには、Capacitorがネイティブアプリにパッケージングする静的ファイルがすべて含まれます。

Capacitor 8をプロジェクトに追加する

ネイティブモバイルコンテナにNext.jsアプリをパッケージングするには、以下の手順に従ってください。

  1. CapacitorコアとCLIをインストールします。
bun add @capacitor/core
bun add -D @capacitor/cli
  1. インストールする必要がある一般的なCapacitorプラグインをインストールします。
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 が必要です。.

  1. NativeモバイルアプリをNext.jsとCapacitorで構築する
bun run mobile

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

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

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

  1. または直接__CAPGO_KEEP_0__ __CAPGO_KEEP_1__で

build

bun run mobile:ios

deploy

bun run mobile: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を利用できます。Live Reloadを有効にするには、以下の手順に従ってください。

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

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

    ipconfig getifaddr en0

  • On Windows, run:

    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. 変更をnativeプロジェクトに適用してください。
bunx cap copy

コマンドは、webフォルダと設定変更をnativeプロジェクトにコピーし、プロジェクト全体を更新せずにします。 copy Android StudioまたはXcodeを使用して、デバイス上でアプリを再構築して実行してください。

  1. Next.jsアプリに変更を加えた場合、モバイルアプリは自動的に更新され、変更を反映します。

注: プラグインを新規にインストールしたり、nativeファイルに変更を加えた場合、live reloadingはweb __CAPGO_KEEP_0__ の変更のみに適用されるため、nativeプロジェクトを再構築する必要があります。

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 アプリからネイティブデバイスの機能にアクセスできるようにします。Share プラグインを使用してみましょう。 Share プラグイン Share プラグインをインストールする

  1. Share プラグインを使用するファイルを更新する
bun add @capacitor/share
  1. ネイティブプロジェクトと同期する 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

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

bunx cap sync
  1. Share プラグインをインストールする

Share プラグインを使用するファイルを更新する

next-capacitor-share
次に、iOS と Android でアプリがよりネイティブのようになるように、Capgo ナビゲーションとトランジションを実装し、水平オーバーフローまたはカットされたセーフエリアを引き起こす可能性のある一般的なiOSレイアウト問題を解決できます。 ## ネイティブのUIに似たCapgoネイティブナビゲーションとトランジション

数年間、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でLiquid Glassタブバー、Androidでぼやけたタブバーのスタイル。Next.jsルーターはルートの状態を保持し、プラグインはネイティブのブラウザを管理します。.

@Capacitor/Capgo-transitions

__CAPGO_KEEP_0__

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

CSS inset モードでネイティブのバーを尊重するようにウェブコンテンツをネイティブのナビゲーションと組み合わせる

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

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

iOSではシステムのレンダリングを使用し、AndroidではぼやけたWebViewのバックグラウンドを使用して、Liquid Glassタブバーをレンダリングします。

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

ページルーティングを実装する場合、Capacitor を使用してネイティブモバイルアプリを作成する Next.js アプリケーションでルーティングされたページを Wrap する必要があります。 cap-router-outlet, cap-page、 cap-content、そして呼び出す setDirection('forward') Capacitorライブアップデートの代替手段を比較するページです。Capacitorライブアップデートの代替手段を選択する際に考慮すべき質問は何ですか。 setDirection('back') 新機能に取り組む前に、問題を提起して議論しましょう。 router.push() または router.back()ウェブヘッダーまたはフッターをネイティブナビゲーションが所有する表面に重複しないようにします。

全ガイドを参照してください。 Using @capgo/capacitor-native-navigation と @capgo/capacitor-トランジション.

セーフエリア

デバイスのセーフエリアを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に配置する _document.tsx (Next.js may not apply tags from) _document.tsx (Next.js may not apply tags from)

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

Set Capacitor iOS contentInset Live Update never first

In capacitor.config.ts, nativeのインセットを無効にして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 Inspectorで実行します。 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 Capgo w-full with 100vw / w-screenwhen possible. Many horizontal overflow issues come from

、

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

  • Next.jsとCapacitorアプリの最適化
  • アプリサイズを最小限に抑えるには、不要な依存関係やアセットを削除することを検討してください。
  • 画像やメディアファイルを最適化して、読み込み時間を短縮することを検討してください。
  • コンポーネントやページの遅延ロードを実装して、初期読み込みパフォーマンスを向上させます。
  • Leverage Capacitor’s built-in optimizations, such as web view caching and app bundling.

Capacitorの組み込み最適化を活用して、Web Viewキャッシュとアプリバンドリングを実現します。

You’ve successfully converted your existing Next.js web application into native iOS and Android apps using Capacitor 8. Your web codebase now runs natively on mobile devices with access to device APIs.

あなたが達成したこと:

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

次のステップ:

  • セットアップ Capgo オーバー・ザ・エアの更新を実行するためにアプリストアの再提出を回避する
  • カメラ、位置情報、またはプッシュ通知などのネイティブプラグインを追加する
  • __CAPGO_KEEP_0__
  • __CAPGO_KEEP_1__

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

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 ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフロー

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

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

マーティンから人間のサポートを受けます

今すぐ始めましょう

Capgoのブログから最新の情報をチェックしてください

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

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

Capacitorアプリで2方向の通信

モバイルアプリのOTA更新の5つの一般的なミス
開発 セキュリティ +1
2025年4月13日

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

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

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

すべてのブログ記事を表示