Capacitor 8を使用して、Next.jsアプリをiOSおよびAndroidに変換する

導入

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

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

What you’ll learn:

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

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

Next.js と Capacitor を使用する利点

Code の再利用性: 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.
ネイティブ機能: Capacitor provides access to native device features like the camera, geolocation, and more, allowing you to build feature-rich mobile apps.
簡素化された開発: With Capacitor, you can develop and test your mobile app using familiar web technologies, reducing the learning curve and streamlining the development process.

前提条件

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

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を使用する必要があります。

__CAPGO_KEEP_0__ に対してモバイル固有のスクリプトを追加します。 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 folder at the root of your project. This contains all the static files that Capacitor will bundle into your native app.

Capacitor のコアと __CAPGO_KEEP_1__ をインストールしてください。

__CAPGO_KEEP_0__ の共通プラグインをインストールしてください。これらのプラグインは、ほとんどの場合に必要になります。

Install Capacitor core and CLI:

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

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: キー値データを永続的に保存

プロジェクトの詳細を Capacitor に初期化してください:

bunx cap init my-app com.example.myapp --web-dir out

を置き換え my-app にアプリ名を入力してください com.example.myapp アプリ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;

ネイティブプラットフォームをインストールします。

bun add @capacitor/ios @capacitor/android

ネイティブプラットフォームのフォルダを追加します。

bunx cap add ios
bunx cap add android

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

iOS の場合、Mac と Xcode が必要です。 iOS の場合、Mac と Xcode が必要です。__CAPGO_KEEP_0__ __CAPGO_KEEP_0__.

プロジェクトをビルドして同期する:

bun run mobile

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

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

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

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

iOS の場合:

bun run mobile:ios

Android の場合:

bun run mobile:android

または直接 Capacitor CLI で開く:

bunx cap open ios
bunx cap open android

Build and run the app:

android-studio-run

Android Studioでプロジェクトが準備できたら、実機またはエミュレータにアプリをデプロイするために「Run」ボタンをクリックしてください。
Xcodeで実機にアプリをデプロイするために署名アカウントを設定してください。署名アカウントを設定する必要がある場合は、XcodeはApple Developer Programに登録されていることを確認して、プロセスを案内します。署名アカウントを設定したら、「Play」ボタンをクリックして実機にアプリを実行してください。

Congratulations! You have successfully deployed your Next.js web app to a mobile device.

But hold on, there's also a faster way to do this during development...

Capacitor Live Reload

開発中は、実機にアプリの変更を即時反映させるためにLive Reloadを利用できます。Live Reloadを有効にするには、以下の手順に従ってください。

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

macOSで、以下のコマンドをターミナルで実行してください:
```
ipconfig getifaddr en0
```
Windows上で実行します。
```
ipconfig
```
出力に表示されるIPv4アドレスを探します。

を更新して、開発サーバーに指します。 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;

に自分のローカルIPアドレス (例えば、) を置き換えます。 YOUR_IP_ADDRESS nativeプロジェクトに変更を適用します。 192.168.1.100).

コマンドは、webフォルダと構成変更をnativeプロジェクトにコピーし、プロジェクト全体を更新せずにします。

bunx cap copy

Android StudioまたはXcodeを使用して、デバイス上でアプリを再構築して実行します。 copy Next.jsアプリに変更を加えた場合、モバイルアプリは自動的に再読み込みされ、変更を反映します。

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

nativeプロジェクトを再構築して実行します。

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

Capacitor プラグインを使用する

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

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

bun add @capacitor/share

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

または再ビルドせずに同期する

アプリをデバイスに再度実行する

bun run mobile

アプリをデバイスに再度実行する

bunx cap sync

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

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

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas. ## Native-feeling UI with Capgo Native Navigation and Transitions

数年間、 Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、Next.jsと統合することはハック的で、すでに Tailwind CSS 4.

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

@capgo/capacitor-native-navigation プラグインを使用するのではなく、ウェブのみのUIキットであるKonsta UIのようなものを使用するのではなく。
@capgo/capacitor-native-navigation —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーされたタブバーのスタイル。Next.jsルーターはルートの状態を維持しますが、プラグインはネイティブのブラウザを所有します。

@__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 と Using @capgo/capacitor-transitions.

安全なエリアにTailwind

Tailwind CSSのデバイス安全エリアを使用するには @capgo/tailwind-capacitor (Cloudflareで公開された tailwind-capacitor on npm). It provides 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";

Tailwindのユーティリティ pt-safe, pb-safe、 px-safe の代わりに env(safe-area-inset-*) 手作り。プロジェクトは積極的に開発されています — ご利用の Next.js 設定で欠けているものがあれば GitHub に PR を開く.

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

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

App Router

): export (app/から 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 may not apply tags from _document.tsx the way you expect for viewport behavior).

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

Create a single app shell and apply safe area padding there — not in multiple nested components:

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@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ pt-safe pb-safe px-safe , you can express the same padding with utilities like

Set Capacitor iOS `contentInset` Set __CAPGO_KEEP_0__ iOS `never` 最初

In capacitor.config.ts, native のインセットを無効にして CSS (または Native Navigation の ) が安全なエリアを管理するようにします。 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-*) 通常の原因は、

, Tailwind

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

__CAPGO_KEEP_0__

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

__CAPGO_KEEP_0__ w-screen __CAPGO_KEEP_0__ w-full 可能な限り、水平方向のオーバーフロー問題は、 100vw / w-screen、安全なエリアの重複パディング、または固定幅のコンテナ — 画面幅のメタタグ自体ではなく — から生じることが多いです。

パフォーマンス最適化

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

不要な依存関係やアセットを削除してアプリサイズを最小化する
画像や他のメディアファイルをロード時間を短縮するために最適化する
コンポーネントやページの遅延ロードを実装して初期ロードパフォーマンスを向上させる
Next.jsと組み合わせてサーバーサイドレンダリング（SSR）を実装して、ロード速度と検索エンジン最適化（SEO）を向上させる
Capacitorの組み込み最適化を活用して、Web Viewキャッシュとアプリバンドリングを実行する

結論

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

あなたが達成したこと:

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

次のステップ:

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

新しいプロジェクトから始めるのですか? Next.jsモバイルアプリケーションを作成するからガイド付きウォークスルーをチェック

リソース

Next.jsドキュメント
@capgo/capacitor-native-navigation —Liquid GlassタブバーとネイティブのChrome
Capacitor 8 Documentation
@capgo/capacitor-transitions —ネイティブフィーリングのページトランジション
@capgo/tailwind-capacitor — Capacitor の安全エリアユーティリティ
Capgo - Capacitor アプリ向けリアルタイム更新

Learn how Capgo can help you build better apps faster, 無料アカウントに登録する今日。

Capacitor 8 を使用して、次の Next.js アプリを iOS & 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, プラグインの追加または更新プラグインの追加または更新の実装詳細 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフロー Capgo ネイティブビルド Capgo ネイティブビルドの製品ワークフロー

Capacitor 8でiOS &amp; Androidに変換する

導入