Next.jsでモバイルアプリ作ってみた

はじめに

モバイル開発したことない大学生が1からNext.jsでモバイルアプリを作成する日記です〜
(iosのみでandroidは今回はやらないです)

XcodeとCocoaPodsのインストール

Xcode→https://apps.apple.com/jp/app/xcode/id497799835
CocoaPods↓

terminal

sudo gem install cocoapods

確認

terminal

pod --version
>> 1.14.3

こちら参考にさせていただきました

Capacitor

公式ドキュメント

terminal

npx create-next-app@latest mobile-app --typescript --tailwind --eslint

cd mobile-app
npm i -D @capacitor/cli
npm i @capacitor/core @capacitor/ios
npx cap init

capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'mobile-app',
-  webDir: 'public',
+  webDir: 'out',
  server: {
    androidScheme: 'https'
  }
};

export default config;

next.config.js

/** @type {import('next').NextConfig} */
- const nextConfig = {}
+ const nextConfig = {
+     output: 'export'
+ }

module.exports = nextConfig

npx cap add ios
npm run build
npx cap sync
npx cap open ios

Xcodeが開くので、実行します

成功したら、このようにNext.jsのデフォルトの画面が表示されます
これで初期設定終わりですね〜〜

カウンターアプリ作成

一旦デフォルトの画面表示できたので、次に、簡単なカウンターアプリを作成していきます
最近こちらを個人的にやっていたんで使わせていただきます🙇

app/page.tsx

"use client";
import { useState } from "react";

export default function Home() {
  const [count, setCount] = useState<number>(0);
  return (
    <main className="p-24 text-center">
      <div className="card h-[300px] w-[300px] shadow-lg mx-auto flex flex-col h-screen rounded-3xl">
        <h3 className="flex-grow m-10 text-gray-500">React Counter</h3>
        <h1 className="flex-grow text-5xl text-blue-500">{count}</h1>
        <div className="flex-grow">
          <button
            className="h-16 w-16 bg-blue-400 rounded-full text-white m-1"
            onClick={() => setCount(count + 1)}
          >
            +
          </button>
          <button
            className="h-16 w-16 border-2 border-blue-400 rounded-full text-blue-400 m-1"
            onClick={() => setCount(count - 1)}
          >
            -
          </button>
        </div>
      </div>
    </main>
  );
}

npm run dev

これでwebアプリでは上手く動いていることがわかるかと思います
iosアプリにするには、どうやってアップデートするかわからなかったので、削除してから再構築しました
（詳しい方もっといい方法教えてください）

1. /iosフォルダを削除
2. 新しくiosフォルダ作成

npx cap add ios
npm run build
npx cap sync
npx cap open ios

これで上手くsimulatorでカウンターアプリを作成できました〜〜
実際にカウントもできることが確認できます

終わり

ここまで読んでいただきありがとうございました〜〜
次は簡単なモバイルアプリでもリリースまでやろうかなと思います〜〜