Next.js 15,Capacitor 8

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.

React Nativeとは異なり、再実装する必要はありません。__CAPGO_KEEP_1__は、既存のNext.jsコードをそのまま実行します。

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

新しいプロジェクトから始めるには? Next.jsモバイルアプリケーションを作成する.

Capacitorの利点

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

前提条件

__CAPGO_KEEP_0__を設定する前に、以下の条件を確認してください:

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' 設定は、Next.jsが静的HTMLファイルを生成し、サーバー上の画像最適化を回避することを示しています。 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"
  }
}

You should see an

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 8 を追加する

ネイティブモバイルコンテナにアプリケーションをパッケージ化するには、次の手順に従ってください。

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 (逆ドメイン記法) を入力してください。

Create or update the 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;

Nativeプラットフォームをインストール:

bun add @capacitor/ios @capacitor/android

Nativeプラットフォームフォルダを追加:

bunx cap add ios
bunx cap add android

Capacitor はプロジェクトのルートディレクトリにNativeプロジェクトを含むフォルダを作成します。 ios フォルダを作成します。 android フォルダを作成します。

Android プロジェクトをビルドするには、 Android Studioが必要です。 iOS の場合、.

Xcode

bun run mobile

がインストールされたMacが必要です。

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

Capgo のカスタムスクリプトが実行され、ネイティブプラットフォームと静的ファイルを同期します。 ネイティブアプリのビルドとデプロイ ネイティブモバイルアプリをビルドしてデプロイするには、次の手順に従ってください。 iOS アプリを開発するには、 Xcode がインストールされている必要があります。Android アプリを開発するには、

Open the native projects:

iOS用の場合:

bun run mobile:ios

Android用の場合:

bun run mobile:android

または直接にCapacitor CLIで:

bunx cap open ios
bunx cap open android

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

android-studio-run

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

成功しました！あなたは、Next.jsのWebアプリをモバイルデバイスにデプロイしました。

しかし、開発中はもっと速くする方法もあります...

Capacitor Live Reload

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

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

macOSの場合、以下のコマンドをターミナルで実行してください。
```
ipconfig getifaddr en0
```
Windowsの場合、以下のコマンドを実行してください。
```
ipconfig
```
出力でIPv4アドレスを探す

__CAPGO_KEEP_0__を更新して、開発サーバーに指すようにします。 capacitor.config.ts __CAPGO_KEEP_0__をローカル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 ライブリロード 192.168.1.100).

__CAPGO_KEEP_0__

bunx cap copy

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

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

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

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

Capacitor プラグインの使用

Capacitor プラグインは、Next.jsアプリからネイティブデバイスの機能にアクセスできるようにします。Share プラグインを使用してみましょう。 Share プラグインをインストールする Share プラグインを使用するには、ファイルを更新する必要があります。

Sync プラグインの変更をネイティブプロジェクトと同期する

bun add @capacitor/share

Sync プラグインの変更をネイティブプロジェクトと同期する必要があります。 pages/index.js Sync プラグインの変更をネイティブプロジェクトと同期する必要があります。

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

Sync プラグインの変更をネイティブプロジェクトと同期する必要があります。

__CAPGO_KEEP_0__の新しいプラグインをインストールする際には、Sync操作を実行し、次にアプリをデバイスに再デプロイする必要があります。

bun run mobile

Syncのみを実行するには、以下のコマンドを実行してください。

bunx cap sync

アプリをデバイスに再デプロイし、再構築します。

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

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

## __CAPGO_KEEP_1__ネイティブナビゲーションとトランジションを使用すると、ネイティブフィーリングのUIが実現されます。数年間は Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、Next.jsと統合することはハック的で、すでに持っている.

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

と組み合わせることはほとんどありません。ネイティブモバイルフィーリングのNext.js + capgoアプリでは、WebのみのUIキットであるKonsta UIではなく、capacitorプラグインを使用することをお勧めします。 native ナビゲーションバー、iOS の Liquid Glass タブバー、Android のブレードタブバースタイルが含まれます。Next.js ルーターはルート状態を保持します; プラグインはネイティブのブラウザを所有します。
@capgo/capacitor-transitions iOS エッジスワイプバックと WebView レイヤー内での Ionic スタイルのページトランジションを実装します。Ionic UI を採用する必要はありません。

両方をインストールします。

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

ネイティブのページトランジションをアプリシェルに追加します。

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(). Do not duplicate web headers or footers when native navigation owns those surfaces.

See the full guides: @capgo/capacitor-native-navigationを使用する and @capgo/capacitor-transitionsを使用する.

Safe areas with Tailwind

CapgoでTailwind CSSのデバイスセーフエリアを使用するには @capgo/tailwind-capacitor (published as tailwind-capacitor on npm). Capgoでは safe-areas utilitiesとその他のCapacitor-friendly 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-safeCloudflare px-safe Capacitor env(safe-area-inset-*) GitHub open a PR on GitHub.

code

API overflow-x: hidden SDK

CLI

npm (app/bun viewport from app/layout.tsx:

import type { Viewport } from 'next';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  viewportFit: 'cover',
};

Pages Router (pages/viewportタグを追加する pages/_app.tsx, not _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);
}

内にラップする .app-shellヘッダー、モーダル、レイアウトラッパーなどで、セーフエリアのパディングを複数回適用すると、UIが切り取られたり大きすぎるように見えることがよくあります。

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor、同等のパディングを表現するには、 pt-safe pb-safe px-safe shell上で実行する必要があります。

Capacitor iOS `contentInset` を `never` に設定します。

最初 capacitor.config.tsIn contentInsetMode: 'css'、ネイティブのインセットを無効にして、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-*) __CAPGO_KEEP_0__の自動コンテンツインセットとCSSの

パディングを組み合わせることは、ダブルスペースの原因となる一般的な問題です。

実際にオーバーフローしている要素を探します。 100vw, Tailwind 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,
  }));

Tailwindを使用すると w-screen に w-full 可能な限り。多くの水平オーバーフロー問題は、 100vw / w-screen, 重複した安全エリアのパディング、または固定幅のコンテナ — ではなく、ビューポートメタタグ自体から

パフォーマンス最適化

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

アプリのサイズを最小限に抑えるために、不要な依存関係とアセットを削除する。
画像や他のメディアファイルをロード時間を短縮するために最適化する。
コンポーネントやページの遅延ロードを実装して、初期ロードパフォーマンスを向上させる。
サーバーサイドレンダリング (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モバイルアプリケーションを作成するためのガイド付きウォークスルーリソース

Next.jsドキュメント

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-ネイティブナビゲーション']}
@capgo/capacitor-native-navigation — Liquid Glass tab bar とネイティブの Chrome
Capacitor 8 ドキュメント
@capgo/capacitor-transitions — ネイティブな感じのページのトランジション
@capgo/tailwind-capacitor — Tailwind の安全なエリアのユーティリティー用に Capacitor
Capgo - Capacitor アプリ用のリアルタイムの更新

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

Capacitor 8 を使って、次の Next.js アプリを iOS と Android に変換してください

あなたが __CAPGO_KEEP_0__ を使っている場合 iOS と Android に対応する Next.js アプリを Capacitor 8 で変換する native プラグインの作業を計画するには、接続する Capgo プラグインディレクトリ Capgo プラグインディレクトリの製品ワークフロー Capacitor プラグインズ by Capgo Capacitor プラグインズ by Capgo の実装詳細プラグインの追加または更新プラグインの追加または更新の実装詳細 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフロー Capgo ネイティブビルド Capgo ネイティブビルドの製品ワークフロー

次のNext.jsアプリをiOS &amp; Androidに変換するCapacitor 8