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

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

# XcodeとCocoaPodsのインストール
Xcode→https://apps.apple.com/jp/app/xcode/id497799835
CocoaPods↓
```terminal:terminal
sudo gem install cocoapods
```
確認
```terminal:terminal
pod --version
>> 1.14.3
```
[こちら](https://qiita.com/oekazuma/items/92e9bae4268fea107efa#8xcode%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B)参考にさせていただきました

# Capacitor

> [公式ドキュメント](https://capacitorjs.jp/docs/getting-started)

```terminal: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
```
```diff_typescript: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;
```
```diff_javascript: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が開くので、実行します
![Screenshot 2023-12-04 19.29.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/840abf03-8100-4a97-73a5-110bf1f51643.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/886424da-edb4-e397-73f2-86a2c47128ca.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/5375e08d-60c7-403b-e098-c16288b91971.png)
成功したら、このようにNext.jsのデフォルトの画面が表示されます
これで初期設定終わりですね〜〜

# カウンターアプリ作成
一旦デフォルトの画面表示できたので、次に、簡単なカウンターアプリを作成していきます
最近[こちら](https://qiita.com/Sicut_study/items/82059f9cbb5b2996e5b3)を個人的にやっていたんで使わせていただきます🙇
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2586059/e1ea103f-4172-4b31-46c2-67f77e1a1ae7.png' width='300px'>

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

```
```terminal
npm run dev
```
これでwebアプリでは上手く動いていることがわかるかと思います
iosアプリにするには、どうやってアップデートするかわからなかったので、削除してから再構築しました
（詳しい方もっといい方法教えてください）
1. `/ios`フォルダを削除
1. 新しく`ios`フォルダ作成
```
npx cap add ios
npm run build
npx cap sync
npx cap open ios
```
これで上手くsimulatorでカウンターアプリを作成できました〜〜
実際にカウントもできることが確認できます

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