メインコンテンツにジャンプする
Capgo ロゴ
チュートリアル

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

Capacitor 8を使用して既存のNext.js 15 WebアプリケーションをネイティブのiOSおよびAndroidモバイルアプリケーションに変換する。静的エクスポートの設定、ネイティブプラグインの追加、およびアプリストアへのデプロイに関する完全なガイド。

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

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

コンテンツマーケティング
Capacitor 8を使用してNext.jsアプリをiOS & Androidに変換する

Introduction

既存のNext.js Webアプリがある場合、このガイドでは、iOSおよびAndroidモバイルアプリとして変換する方法を学びます。 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.

__CAPGO_KEEP_1__は、React Nativeとは異なり、再構築する必要はありません。既存のNext.jsコードはそのまま動作します。

  • What you’ll learn:
  • Add Capacitor 8 with essential native plugins
  • __CAPGO_KEEP_0__ 8に基本的なネイティブプラグインを追加する
  • iOSおよびAndroidシミュレータでビルドおよびテストする
  • 開発を高速化するためにライブリロードを有効にする

オプションで、ネイティブな見た目のコンポーネントを追加するKonsta UIを追加する Building a Next.js Mobile App from Scratch.

Next.jsとCapacitorの利点

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

前提条件

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

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

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

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

CapgoでNext.jsアプリをモバイルに設定するには、最初に静的エクスポート用にNext.jsアプリを設定する必要があります。 __CAPGO_KEEP_0__ は静的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' 設定は、静的HTMLファイルの生成をNext.jsに指示し、サーバーが必要なNext.jsの画像最適化を回避します。 images: { unoptimized: true } 重要な注意事項:

サーバーが必要な機能 (__CAPGO_KEEP_0__ ルート、サーバーコンポーネントのデータフェッチなど) を使用している場合、クライアントサイドの代替または外部APIを使用するか、コードをリファクタリングする必要があります。 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.

静的エクスポートをテストするには、以下のコマンドを実行してください。 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"
  }
}

次のフォルダがプロジェクトのルートに表示されます。このフォルダには、__CAPGO_KEEP_0__ がネイティブアプリにバンドルする静的ファイルがすべて含まれます。

bun run build

Capgo 8をプロジェクトに追加する out folder at the root of your project. This contains all the static files that Capacitor will bundle into your native app.

Adding Capacitor 8 to Your Project

To package your Next.js app into a native mobile container, follow these steps:

  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. プロジェクトの詳細を入力して Capacitor を初期化してください。
bunx cap init my-app com.example.myapp --web-dir out

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

  1. 適切な構成で "__CAPGO_KEEP_0__" ファイルを作成または更新してください。 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. __CAPGO_KEEP_0__ はプロジェクトのルートにネイティブプロジェクトを含むフォルダを作成し、
bunx cap add ios
bunx cap add android

Capacitor will create ios Android プロジェクトをビルドするには、 android 必要なライブラリをインストールしてください。

必要なライブラリをインストールしてください。 Android StudioiOS用の場合はMacに Xcode.

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

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

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

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

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

For iOS:

bun run mobile:ios

For Android:

bun run mobile:android

Or directly with Capacitor CLI:

bunx cap open ios
bunx cap open android
  1. 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.

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

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

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

ローカルIPアドレスに置き換えます (例えば YOUR_IP_ADDRESS ネイティブプロジェクトに変更を適用します: 192.168.1.100).

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

__CAPGO_KEEP_0__ copy __CAPGO_KEEP_1__

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

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

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

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

Shareプラグインのインストール

bun run mobile

Or just sync without rebuilding:

bunx cap sync
  1. Rebuild and run the app on your device.

Now, when you click the “Share now!” button, the native share dialog will appear, allowing you to share the content with other apps.

next-capacitor-share

To make the button look more mobile-friendly, we can add some styling using my favorite UI component library for web apps - Next.js (no pun intended).

Konsta UI v5を追加する

Konsta UI v5 Ionic Konsta UI v5 Tailwind CSS 4.

Konsta UI v5

You need to have Tailwind CSS 4 はすでにインストールされています Next.js アプリのモバイル UI を強化するには、 Konsta UI v5、iOS と Android スタイリングに適応するモバイル フレンドリーな UI コンポーネント ライブラリを使用できます。Konsta UI v5 を統合するには、以下の手順に従ってください。

  1. Konsta UI v5 を必要とするパッケージをインストールします:
bun add konsta
  1. 主 CSS ファイル (例えば styles/globals.css):
@import 'tailwindcss';
/* import Konsta UI v5 theme */
@import 'konsta/theme.css';
  1. Konsta UI のテーマをインポートします。

Next.js 用の Tailwind CSS 4 を構成します (PostCSS): postcss.config.mjs プロジェクトのルートディレクトリに

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Tailwind v4 は直接 Next.js で PostCSS を使用します。グローバル インポートを styles/globals.css (上記で既に追加されています。

  1. Konsta UI v5 でアプリをラップします App コンポーネント pages/_app.js:
import { App } from 'konsta/react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

例のページ

設定が完了したら、Konsta UI v5 Reactコンポーネントを使用してNext.jsページを作成できます。

  1. を更新 pages/index.js Konsta UI v5コンポーネントを使用するようにファイルを変更
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/react';

export default function Home() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Here is your Next.js & Konsta UI app. Let's see what we have here.
        </p>
      </Block>
      <BlockTitle>Navigation</BlockTitle>
      <List>
        <ListItem href="/about/" title="About" />
        <ListItem href="/form/" title="Form" />
      </List>

      <Block strong className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}
  1. Material Designテーマのために必要なKonsta UI v5のために、Robotoフォントを追加

あなたの pages/_document.js または主HTMLファイルに追加

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>
  1. 開発サーバーを再起動し、再構築

Next.jsアプリは、Konsta UI v5とTailwind CSS 4でスタイリングされたネイティブなモバイルUIを持つようになります。

パフォーマンス最適化

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

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

まとめ

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

達成したこと:

  • Next.jsを静的エクスポート用に設定する。
  • Added Capacitor 8 with essential plugins
  • iOSとAndroidのシミュレータにビルドしてデプロイする。
  • 開発用にライブリロードを有効にする。
  • オプションで、ネイティブな見た目のコンポーネント用のKonsta UIを追加します。

次のステップは

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

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

リソース

Capgo を使って、より良いアプリをより速く作る方法を学びましょう。 無料アカウントに登録する 今日。

Capacitor 8 を使って、Next.js アプリを iOS および Android に変換してください。

__CAPGO_KEEP_0__ を使っていますか。 Capacitor 8 を使って、Next.js アプリを iOS および Android に変換してください。 __CAPGO_KEEP_0__ を使って、ネイティブ プラグインの作業を計画するには、__CAPGO_KEEP_0__ を接続してください。 Capgo プラグイン ディレクトリ 製品ワークフローについての情報は、Capgo プラグインディレクトリで確認できます。 Capacitor プラグインは、Capgo によって提供されています。 実装の詳細についての情報は、Capacitor プラグインによって、Capgo によって提供されています。 プラグインの追加または更新 実装の詳細についての情報は、プラグインの追加または更新で確認できます。 Ionic Enterprise プラグインの代替 製品ワークフローについての情報は、Ionic Enterprise プラグインの代替で確認できます。 Capgo ネイティブビルド 製品ワークフローについての情報は、Capgo ネイティブビルドで確認できます。

リアルタイムでCapacitorアプリを更新

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

今すぐ始める

ブログの最新記事

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

Capacitorアプリで2方向の通信
開発、モバイル、アップデート
2025年4月26日

Capacitorアプリの2方向通信

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

5つのOTA更新ミスを避ける

モバイルアプリのライブ更新のための5つのセキュリティベストプラクティス
開発、モバイル、更新
2025年1月14日

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

ブログからすべての記事を見る