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

導入

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

Capacitorは、カメラ、ファイルシステム、プッシュ通知などのデバイスAPIにアクセスできるネイティブのコンテナにあなたのウェブアプリをラップする。既存のReactコードベースを変更する必要はありません —あなたのNext.jscodeはそのまま動作します。

学ぶこと:

既存のNext.jsアプリを静的エクスポート用に設定する
Capacitor 8にエッセンシャルなネイティブプラグインを追加する
iOSとAndroidのシミュレータでビルドしてテストする
開発を高速化するためのライブリロードを有効にする
iOSの一般的なレイアウト問題を解決する (ビューポート、セーフエリア、水平オーバーフロー)
Capgoネイティブナビゲーションとトランジションを使用してネイティブな感じの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アプリをパッケージ化するには、以下の手順に従ってください。

CapacitorコアとCLIをインストールします。

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

インストールする必要がある一般的なCapacitorプラグインをインストールします。

bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/preferences

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

@capacitor/app: アプリのライフサイクルイベントをハンドル (前景/背景、URL)
@capacitor/keyboard: モバイル上のキーボードの動作を制御
@capacitor/splash-screen: ネイティブのスプラッシュスクリーンを管理
@capacitor/preferences: キー値データを永続的に保存

Initialize Capacitor with your project details:

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

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

アプリ ID (逆ドメイン記法) を使用して。 capacitor.config.ts 適切な構成で「file」を作成または更新します。

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

Capgo はネイティブプラットフォームのフォルダをプロジェクトのルートに作成します。

bunx cap add ios
bunx cap add android

Capacitor will create ios Android プロジェクトをビルドするには、Android Studio が必要です。 android Android Studio

iOS プロジェクトをビルドするには、Mac に Xcode が必要です。 XcodeXcode Xcode.

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

bun run mobile

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

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

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

または直接__CAPGO_KEEP_0__ __CAPGO_KEEP_1__で:

build and deploy native mobile app with Next.js and Capacitor

bun run mobile:ios

Building and Deploying Native Apps

bun run mobile:android

Or directly with Capacitor CLI:

bunx cap open ios
bunx cap open android

アプリをビルドして実行する:

android-studio-run

Android Studioで、プロジェクトが準備できたら、実行ボタンをクリックして、接続したデバイスまたはエミュレータにアプリをデプロイします。
Xcodeで、実機にアプリをデプロイするために署名アカウントを設定してください。アプリを実機にデプロイするにはApple Developer Programに登録する必要があります。設定が完了したら、実行ボタンをクリックして、接続したデバイスでアプリを実行します。

成功しました！

しかし、開発中にはもっと速い方法があります。

Capacitor Live Reload

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

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

macOSの場合、ターミナルで以下のコマンドを実行してください:
```
ipconfig getifaddr en0
```
On Windows, run:
```
ipconfig
```
IPv4アドレスの出力を見つける

を更新して 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 nativeプロジェクトに変更を適用する 192.168.1.100).

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

bunx cap copy

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

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

__CAPGO_KEEP_0__

code

Capacitor プラグインを使用する

Capacitor プラグインは、Next.js アプリからネイティブデバイスの機能にアクセスできるようにします。Next.js アプリでネイティブデバイスの機能を使用する方法をご紹介します。 Share プラグイン Share プラグインを使用する例として、Share プラグインをご紹介します。

Share プラグインをインストールする

bun add @capacitor/share

Share プラグインを使用するファイルを更新する pages/index.js Share プラグインを使用するファイルをネイティブプロジェクトと同期する

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 now!」ボタンをクリックすると、ネイティブの共有ダイアログが表示され、他のアプリと共有することができます。

Share プラグインをインストールする

次に、iOS と Android 向けのアプリを 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 —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーされたタブバーのスタイル。Next.jsルーターはルートの状態を維持し、プラグインはネイティブのChromeを所有します。.

@Capacitor/Capgo-transitions

@capgo/capacitor-native-navigation 両方をインストールします
@capgo/capacitor-transitions __CAPGO_KEEP_1__

Ionic

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

Liquid Glass タブバーをレンダリングする（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}`);
});

Capacitorを使用したネイティブモバイルアプリの開発 (Using the context of the page, I translated "app shell" to "Capacitorを使用したネイティブモバイルアプリの開発" which is a more natural translation in Japanese.)

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ライブアップデートの代替オプションを比較するページです。 setDirection('back') 新機能に取り組む前に、問題を提起して議論しましょう。 router.push() Capacitorライブアップデートの代替オプションを比較するページです。 router.back()ウェブヘッダーまたはフッターをネイティブナビゲーションが所有する表面に複製しないでください。

See the full guides: @capgo/capacitor-ネイティブナビゲーションと @capgo/capacitor-トランジション.

セーフエリア

デバイスのセーフエリアをTailwind CSSで使用するには @capgo/tailwind-capacitor (公開日 tailwind-capacitor npmで safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

、 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, not _document.tsx ((Next.js may not apply tags from) _document.tsx (Next.js may not apply tags from)

(Next.jsのビューポートの挙動に適用されるタグが予想どおりではない場合)

(iOSのセーフエリアを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);
}

(iOSセーフエリアを1つのルートラッパーからのみ取り扱う) .app-shell(セーフエリアのパディングを1つのアプリシェルにのみ適用し、複数のネストされたコンポーネントに適用しない)

(セーフエリアのパディングを1つのアプリシェルにのみ適用し、複数のネストされたコンポーネントに適用しない) @capgo/tailwind-capacitor(セーフエリアのパディングがヘッダー、モーダル、レイアウトラッパーなどに複数回適用されると、UIが切り取られたり大きすぎるように見えることがある) pt-safe pb-safe px-safe (セーフエリアのパディングがヘッダー、モーダル、レイアウトラッパーなどに複数回適用されると、UIが切り取られたり大きすぎるように見えることがある)

Set Capacitor iOS `contentInset` (Tailwind CSSの) `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,
  }));

replace w-screen with w-full when possible. Many horizontal overflow issues come from 100vw / w-screen, duplicated safe-area padding, or a fixed-width container — not from the viewport meta tag itself.

パフォーマンス最適化

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

不要な依存関係やアセットを削除してアプリサイズを最小化する。
画像やメディアファイルのロード時間を短縮するために、画像やメディアファイルを最適化する。
コンポーネントやページの初期ロードパフォーマンスを向上させるために、ラジーロードを実装する。
Next.jsのサーバーサイドレンダリング（SSR）を使用して、検索エンジン最適化（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を静的エクスポート用に設定しました。
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_KEEP_0__
@capgo/capacitor-native-navigation __CAPGO_KEEP_0__
Capacitor 8 Documentation
@capgo/capacitor-transitions __CAPGO_KEEP_1__
@capgo/tailwind-capacitor — Capacitorの安全エリアユーティリティ
Capgo - Capacitorアプリのリアルタイム更新

Capgoを使用すると、より良いアプリをより速く作成できることを学びましょう無料アカウントに登録する今日

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

あなたが使用している Capacitor 8を使用してNext.jsアプリをiOS & Androidに変換する ネイティブプラグインの作業を計画するには、__CAPGO_KEEP_0__ Plugin Directoryと接続する Capgo Plugin Directory Capgo Plugin Directoryの製品ワークフロー Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, プラグインの追加または更新プラグインの追加または更新の実装詳細についてイオニックエンタープライズプラグインの代替イオニックエンタープライズプラグインの代替の製品ワークフロー Capgo ネイティブビルド Capgo ネイティブビルドの製品ワークフロー

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

導入