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

Capacitor 8 を使用して Capacitor 8 で Next.js アプリを iOS & Android に変換する

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.

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

ライター

バレリア

レビュアー

ジョーダン

編集者

Capacitor 8 を使用して __CAPGO_KEEP_0__ 8 で Next.js アプリを iOS & Android に変換する

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

Introduction

既存のNext.jsウェブアプリがある場合、このガイドでは、 Capacitor 8 — 最新バージョンでパフォーマンスが向上し、新機能が追加された。

Capacitor wraps your web app in a native container, giving you access to device APIs like camera, filesystem, and push notifications while keeping your existing React codebase. Unlike React Native, you don’t need to rewrite anything — your Next.js code runs as-is.

Capacitor

  • Capacitor
  • Add Capacitor 8 with essential native plugins
  • Capacitor
  • Capacitor
  • Capacitor
  • Add native-feeling UI with Capgo Native Navigation and Transitions

新プロジェクトから始めるには? Next.jsとCapacitorを使用したモバイルアプリの作成.

Benefits of Using Next.js and Capacitor

  • Code Reusability: Next.js enables you to write reusable components and share code between your web and mobile apps, saving development time and effort.
  • パフォーマンス: Next.js offers built-in performance optimizations, such as server-side rendering and code splitting, ensuring fast loading times and a smooth user experience.
  • : Next.jsでは、サーバーサイドレンダリングとコードスプリッティングなどのパフォーマンス最適化機能が組み込まれており、高速な読み込み時間と滑らかなユーザー体験を実現します。: Capacitor provides access to native device features like the camera, geolocation, and more, allowing you to build feature-rich mobile apps.
  • : Capacitorでは、カメラ、位置情報、などのようなネイティブデバイス機能にアクセスでき、機能豊富なモバイルアプリを作成できます。: With Capacitor, you can develop and test your mobile app using familiar web technologies, reducing the learning curve and streamlining the development process.

: Capacitorでは、Web技術を使用してモバイルアプリを開発およびテストできます。これにより、学習カーブが低減され、開発プロセスが簡素化されます。

始める前に、次のことを確認してください:

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

Next.jsアプリの設定

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

Open your next.config.js (or next.config.ts) file and add the export configuration:

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

module.exports = nextConfig;

The output: 'export' setting tells Next.js to generate static HTML files, and images: { unoptimized: true } bypasses Next.js image optimization which requires a server.

Important: If you’re using features that require a server (API routes, server components with data fetching, etc.), you’ll need to refactor those to use client-side alternatives or external APIs.

Add mobile-specific scripts to your 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"
  }
}

Test the static export by running:

bun run build

You should see an out folder at the root of your project. This contains all the static files that Capacitor will bundle into your native app.

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

次の手順に従って、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

Replace my-app with your app name and com.example.myapp with your app ID (reverse domain notation).

  1. Create or update the capacitor.config.ts file with the proper configuration:
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. Install native platforms:
bun add @capacitor/ios @capacitor/android
  1. Add the native platform folders:
bunx cap add ios
bunx cap add android

Capacitor will create ios and android folders at the root of your project containing the native projects.

Androidアプリをビルドするには、 Android StudioiOSの場合は、 Xcode.

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

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

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

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

  1. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__を開く

iOSの場合:

bun run mobile:ios

Androidの場合:

bun run mobile:android

または直接でCapacitor CLI:

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

android-studio-run

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

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

成功しました! Next.jsのWebアプリをモバイルデバイスにデプロイしました。

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

Capacitor Live Reload

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

  1. ローカルIPアドレスを探します。

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

    ipconfig getifaddr en0

  • Windowsの場合、以下のコマンドを実行してください。

    ipconfig

    出力のIPv4アドレスを探してください。

  1. 開発サーバーにアクセスするためのURLを更新します。 capacitor.config.ts ローカルIPアドレスに置き換えてください (例:)
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 Capacitorプロジェクトに変更を適用します。 192.168.1.100).

  1. __CAPGO_KEEP_0__ Live Reload
bunx cap copy

__CAPGO_KEEP_0__ Live Reload copy コマンドは、Web フォルダと構成変更をネイティブ プロジェクトにコピーしますが、プロジェクト全体を更新しません。

  1. Android Studio または Xcode を使用して、デバイス上でアプリを再構築して実行してください。

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

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. Sync の変更をネイティブ プロジェクトと同期してください。
bun add @capacitor/share
  1. Share プラグインの例 pages/index.js __CAPGO_KEEP_0__ プラグインは、Next.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. Share プラグインのインストール

先ほど説明したように、新しいプラグインをインストールする際には、Sync操作を実行し、次にアプリをデバイスに再デプロイする必要があります。 これを行うには、次のコマンドを実行してください。

bun run mobile

または、再構築せずにSyncだけを行う:

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

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

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

数年間、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 __CAPGO_KEEP_0__.

For a native mobile feel in a Next.js + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

両方をインストールする

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

native navigationをCSS inset modeで設定して、webコンテンツがnative barsを尊重するようにする

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

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

Render a Liquid Glass tab bar (iOSはシステムが所有するレンダリングを使用し、Androidはblurred WebView backdropを使用する):

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

native page transitionsをアプリシェルに追加する

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

initTransitions({ platform: 'auto' });

Wrap routed pages in cap-router-outlet, cap-page、 cap-content、 setDirection('forward') or setDirection('back') context router.push() または router.back()ウェブヘッダーまたはフッターを複製しないでください。

詳細なガイドを参照してください: Using @capgo/capacitor-native-navigation そして Using @capgo/capacitor-transitions.

安全なエリアにTailwind

デバイスの安全なエリアのTailwind CSSで使用するには @capgo/tailwind-capacitor (出版された tailwind-capacitor on 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";

Use utilities such as pt-safe, pb-safe, and px-safe instead of sprinkling env(safe-area-inset-*) by hand. The project is actively developed — if something is missing for your Next.js setup, open a PR on GitHub.

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

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

App Router

: export (app/protectedTokens viewport から 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);
}

セーフエリアのパディングを複数回適用すると、UIが切り取られたり大きすぎるように見えることがあります .app-shellそして

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor、ユーティリティライブラリを使用して同じパディングを表現できます。 pt-safe pb-safe px-safe 単一のシェル上で。

Capacitor iOS contentInset に設定します。 never 最初に

、ネイティブのインセットを無効にして、CSS（またはネイティブナビゲーションの capacitor.config.ts)がセーフエリアを管理するようにします。 contentInsetMode: 'css'__CAPGO_KEEP_0__の自動コンテンツインセットとCSSのパディングを組み合わせると、通常はダブルスペースの原因となります。

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-*) 通常の原因は、

要素を使用している

という要素です。 100vw、テールウィンド w-screen、固定ピクセル幅、または大きい min-width.

Safari Web インスペクターで実行:

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

テールウィンドを使用すると w-screen を置き換える w-full 可能な限り 100vw / w-screen水平方向のオーバーフロー問題は、

安全エリアの重複パディング、または固定幅のコンテナ — ではなく、

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

  • パフォーマンス最適化
  • Next.jsと__CAPGO_KEEP_0__アプリの最適なパフォーマンスを確保するには、以下のベストプラクティスを考慮してください:
  • 未使用の依存関係やアセットを削除してアプリサイズを最小化すること。
  • サーバーサイドレンダリング (SSR) を使用して Next.js を使用してアプリの読み込み速度と検索エンジン最適化 (SEO) を向上させます。
  • Capacitor の組み込み最適化機能を活用して、ウェブビューのキャッシュとアプリのバンドルを実行します。

まとめ

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 を静的エクスポート用に設定しました。
  • Added Capacitor 8 with essential plugins
  • iOS と Android のシミュレータにビルドしてデプロイしました。
  • 開発用にライブリロードを有効にしました。
  • iOS の一般的なレイアウト問題 (ビュー ポート、セーフ エリア、オーバーフロー) を修正しました。
  • Added native-feeling UI with Capgo Native Navigation and Transitions

次のステップ:

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

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

リソース

Learn how Capgo can help you build better apps faster、 サイン アップする 今日。

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

あなたが __CAPGO_KEEP_0__ を使用している場合 CapacitorでiOS&amp;Androidアプリを構築 __CAPGO_KEEP_0__を接続して Capgo プラグインディレクトリ Capgo プラグイン Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__ プラグイン __CAPGO_KEEP_1__ __CAPGO_KEEP_0__ プラグイン __CAPGO_KEEP_0__ Capgo Capgo

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

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.

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

コンテキスト:ホーム ページのマーケティング コピー。役割:ウェブサイト コピー文。見つける場所:コンポーネント HumanSupport.astro、コンポーネント pricing/Plans.astro。メッセージ キー `home_hero_human_support` (ホーム ヘロ ヒューマン サポート)。

今すぐ始めよう

Capgo gives you the best insights you need to create a truly professional mobile app.

2-Way Communication in Capacitor Apps
__CAPGO_KEEP_0__ は、プロフェッショナルなモバイル アプリを作成するために必要な最良の洞察を提供します。 2方向のコミュニケーションを実現する __CAPGO_KEEP_0__ アプリの特徴です。2方向のコミュニケーションを実現する __CAPGO_KEEP_0__ アプリの特徴です。開発、モバイル +1
2025年4月26日

Capacitorアプリの2方向通信

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

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

モバイル
開発 セキュリティ +1
2025年1月14日

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

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