Zenn
Open6

モダンなBaaSを使って Next.js + PayPayアプリコール(App Invoke) でなんかやる

Next.js
Prisma
Strapi
PayPay
Supabase
新山 慶介新山 慶介

next.js プロジェクトの作成から

$ npx create-next-app@latest

What is your project named?  app-name
Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS?  Yes
Would you like your code inside a `src/` directory?  Yes
Would you like to use App Router? (recommended)  Yes
Would you like to use Turbopack for `next dev`?  Yes
Would you like to customize the import alias (`@/*` by default)?  No
新山 慶介新山 慶介

ディレクトリ構成を考える

/
├─ prisma/
│  ├─ migrations/
│  ├─ scheme.prisma
│  └─ seed.ts
├─ public/
├─ src/
│  └─ app/
│     ├─ api/
│     │  └─ (api...)
│     ├─ (page...)
│     ├─ layout.tsx
│     ├─ page.tsx
│     ├─ components/
│     │  ├─ ui/
│     │  │  └─ (shadcn/uiコンポーネント)
│     │  └─ (自作コンポーネント)
│     ├─ hooks/
│     │  └─ (カスタムフック)
│     ├─ libs/
│     │  └─ (共通ライブラリ)
│     ├─ context/
│     │  └─ (コンテキスト)
│     ├─ types/
│     │  └─ (型定義)
│     └─ middleware.ts
├─ .gitignore
└─ ...その他
新山 慶介新山 慶介

今回、管理画面の構築をヘッドレスCMSで試す。
デザインもシンプルで使い勝手が良さそうな Strapi を採用。

複数のリポジトリで管理するのが大変面倒くさいので、モノレポで進めていく。

/
├─  backend/(Strapi)
└─  frontend/(Next.js)
新山 慶介新山 慶介

最初に今後の順序・タスクを明確にしていく。

  1. 基本設計（DB, APIなど）
  2. Supabase, Prismaのセットアップ・検証
  3. Strapiのセットアップ・検証
  4. フロントの実装（shadcn.ui）
  5. Next.jsのAPI実装（PayPay含む）
  6. フロント - Strapiの統合
  7. フロント - APIの統合（PayPay含む）
  8. デプロイ

本来は開発環境を作るためにDockerを採用したいところだが、今回は時間がないので割愛。
Dockerで開発環境も作っていくぜ（スクラップ書いてたら急にモチベ上がった。）
デプロイ環境は学習の意も込めてCMSはAWSにデプロイしてみたい。
Next.jsはいつも通りVercelへ。

フロントは凝らないので、LLMにディレクトリ構成だけぶち込んで作ってもらう。
私がやるのはAPIの実装と統合作業。
TailwindCSSを採用しているので独自スタイルは絶対に書かない方針でいく。

新山 慶介新山 慶介

基本設計

作りたいもの

ECサイトが手っ取り早いので、アパレルのECサイトを作ってみよう。

システム構成

Next.js：フロントエンド
Supabase：注文データ管理
Strapi CMS：コンテンツ管理（商品・営業時間など）
Supabase Auth：認証
PayPay App Invoke：決済
（余裕があればStripeの決済も導入）

DB設計

mermaid大好き。

ユニクロのECを参考にして、色・サイズ・値段・数量・在庫を考慮してみる。

コメントやいいね機能は今回は非要件にする。

API設計

Next.js側：
/api/v1/users/[id]
→ ユーザー情報を取得するAPI（プロフィール画面などで使用）

/api/v1/orders
→ 注文一覧を取得するAPI（フィルターで現在ログインしているユーザーに絞り込む）

/api/v1/orders/[id]
→ 注文詳細を取得するAPI（注文履歴画面で使用）

/api/v1/checkout
→ 決済のためのAPI（PayPay API コール）

Strapi側：
/api/v1/item-categories
→ カテゴリ一覧を呼び出す

/api/v1/items
→ 商品一覧を呼び出す

/api/v1/items?category=[]
→ 特定のカテゴリに属する商品一覧を呼び出す。

抜け漏れは後ほど修正。

新山 慶介新山 慶介

2.Supabase, Prismaのセットアップ

Prismaのインストール （参考↓

https://www.prisma.io/docs/guides/nextjs

$ npm i prisma --save-dev
$ npm i @prisma/client
$ npx prisma init

ルートにprisma/ディレクトリが作成される。

Supabaseのセットアップ

  1. プロジェクト作成
  2. ヘッダーの"Connect"から、"ORMs"を選択して "Prisma"
  3. .env.local をコピペ → パスワードの部分をDBパスワードに修正
  4. scheme.prismaをコピペ

※DBパスワードに使用できない文字列があるとエラーになるらしい。

Supabase と Prismaの接続確認

scheme.prisma
model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
}

一旦適当にユーザーモデルを作ってみる。

$ npx prisma migrate dev --name init //migration

migrateはマイグレーション。
これが成功するとPrismaで作成したモデルがSupabaseにも反映されるはず。

$ npx prisma generate //model generate

generateはPrisma Clientや型定義ファイルを自動生成するもの。
（まだよくわかってない。）