この記事を読みながら開発していく。
Next13から利用できるApp Routerを使用する。
Xcodeをインストール
MacbookにXcodeをインストールしておく。
Nextのプロジェクトを立上げる
bash
% npx create-next-app@latest --typescript
Need to install the following packages:
create-next-app@13.4.4
Ok to proceed? (y)
✔ What is your project named? … next-capacitor-ios-application
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Users/xxxx/Documents/next-capacitor-ios-application.
Capacitorのインストール
Capacitorのcliをインストール
bash
npm install -D @capacitor/cli
Capacitorのcoreとiosをインストール
bash
npm install @capacitor/core @capacitor/ios
iOSを追加
bash
npx cap add ios
pod installで怒られたら以下のライブラリを入れると良い
##＃ Capacitorを初期化
設定はデフォルトのまま
bash
$ npx cap init
configファイルの設定
capacitor.config.tsの設定
Next.jsのデフォルトがoutなので、webDir（出力されたコードの参照場所）をpublic→outに変更
capacitor.config.ts
#import { CapacitorConfig } from '@capacitor/cli';
#const config: CapacitorConfig = {
# appId: 'com.example.app',
# appName: 'next-vercel-edgefunction',
- webDir: 'public',
+ webDir: 'out',
# server: {
# androidScheme: 'https'
# }
#};
#export default config;
next.config.jsの設定
next.config.jsの設定を変更して静的コンテンツとして出力されるようにする。
output: 'export'でSSGに変更されるらしい。
APIやmiddlewareは使用できなくなる。
別プロジェクトでAPIは開発する必要がありそう。
next.config.js
#/** @type {import('next').NextConfig} */
- const nextConfig = {}
+ const nextConfig = {
+ output: 'export'
+ }
#module.exports = nextConfig
実際にiOSアプリとして確認
静的コンテンツを生成
bash
npm run build
npx cap sync
npx cap open ios
こんな感じで確認できる様になった。
次回はAuth0でログインを追加しようと思います。
というか、なんのアプリを作ろう。。。
Discussion