Next.js Supabase Stripe のスターターアプリを デプロイボタンを利用して設定するハンズオン。

# Next.jsアプリケーションのスターター

vercel/nextjs-subscription-payments: Clone, deploy, and fully customize a SaaS subscription application with Next.js.
https://github.com/vercel/nextjs-subscription-payments

デプロイボタンで設定してから、ローカルに環境を構築し、テストをします。

基本的にreadme.mdファイルを読みながら行っています。

この記事は
Next.jsはサーバー
Supabaseはサーバー
の組み合わせで動かしています。

----------------------------------------

Local Development for SaaS product in 2024 // Next.js, Supabase and Stripe - YouTube

https://www.youtube.com/watch?v=Gbf-E3H824k

----------------------------------------


<details><summary>Next.jsのアプリにStripeの価格を反映させる。</summary>

順番を間違えるとStripeのサブスクライブのデータがNext.jsに反映されません。
各環境変数の設定は済んでいるものとします。

この順番で実行するとStripeのデータが反映されます。

↓それぞれVSCodeのターミナルの別ウィンドウで実行します。

```terminal
pnpm run dev

```

```terminal
stripe listen --forward-to http://127.0.0.1:3000/api/webhooks

```

```terminal
stripe fixtures fixtures/stripe-fixtures.json

# fixturesフォルダをsrcフォルダの下に移動している場合
stripe fixtures src/fixtures/stripe-fixtures.json

```

</details>



# 開発環境

Windows
VSCode

アカウントの作成
GitHub
Supabase
Vercel
Stripe

それぞれのCLIを使えるようにしておきます。

CLIとは、VSCodeから直接サービスにアクセスできるようになります。

----------------------------------------

# Stripe

Stripe
https://stripe.com/jp

Stripe API キーの取得

Stripeへ行き、アカウントを作成します。

ログインしたらダッシュボードへ行きます。

画面上の中央にある開発ボタンを押します。

開発者画面に出ます。

タブのAPI キー を開きます。

APIキーの画面が開きます。

公開可能キー
pk_test_51O*****E6U

シークレットキー
sk_test_51O*****qVU

をメモしておきます。



----------------------------------------

# デプロイボタン

vercel/nextjs-subscription-payments: Clone, deploy, and fully customize a SaaS subscription application with Next.js.
https://github.com/vercel/nextjs-subscription-payments

readme.md

## Step-by-step setup

Step-by-step setupにあるDeployボタンを押します。

You're almost done.
と新しい画面になるので、指示に従っていきます。



## Create Git Repository

GitHubを選択します。

Repository Nameをつけます。

vns_masakinihirota

Create private Git Repositoryのチェックを外します。

Createボタンを押します。

## Add Integrations

Supabaseの Addボタンを押します。

別ウィンドウが開きます。

Choose organization
organizationを選び
緑色の Install integration ボタンを押します。

New project

Project name
vns_masakinihirota（適当）

Database Password
er*****Ft

※パスワードは Generate a password を押して作成できます。

Region
Northeast Asia (Tokyo)
リージョンは日本を選びます。

Create Project ボタンを押します。

元の画面に戻ります。



Configure Project

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
pk_test_51O*****E6U

STRIPE_SECRET_KEY
sk_test_51O*****qVU

メモしておいた、StripeのAPI キーを入力します。

Deployボタンを押します。

Delplyが始まり、
Buildingなどが始まります。

Congratulations! が出ればVercelへの登録が出来ました。

このプロジェクトにGitHubとSupabaseが連携しています。

※ローカルも連携させるためにはログインとリンクコマンドが必要です。

GitHubはリポジトリができていればうまくいっています。

SupabaseはTable Editorを開いてテーブルができていればうまくいっています。

```Supabase のテーブル
customers
prices
products
subscriptions
users

```



----------------------------------------

# ローカルにインストール

リポジトリがGitHubに出来ています。

それをVSCodeでインストールします。

https://github.com/[ユーザー名]/[プロジェクト名]

＜＞Codeボタンからインストール方法を選択します。

今回は、GitHub CLIでインストールします。

## インストール

```terminal
gh repo clone [ユーザー名]/[プロジェクト名]

cd プロジェクト名

pnpm install

```

環境変数ファイルのサンプルをコピーします。

```terminal
.env.example
.env.local.example

```

の2つの環境変数のサンプルファイルがあります。

これをコピーして

```terminal
.env
.env.local

```

に名前を変更します。

.gitignoreファイルに登録します。

```.gitignore
.env*

```

`.env` にはGitHub認証用の環境変数
`.evn.local` にはNext.jsの環境変数を設定します。



----------------------------------------

# Vercelのダッシュボード

Vercelのダッシュボードを開くとURLが与えられています。

例

```
Deployment
vns-masakinihirota-43nb214mu-masakinihirota.vercel.app

Domains
vns-masakinihirota-kappa.vercel.app

```

Deploymentは開発のビルド毎に付与されます。

Domainsは固定のURLです。
※独自ドメインを設定しなければずっと同じです。

VercelではGitHubに連携してあると、更新を読み取り、
自動でビルドしてくれます。



----------------------------------------

# GitHub認証

Supabaseを利用して、Next.jsのアプリケーションでGitHub認証が出来るようにします。

## Login with GitHub

Login with GitHub | Supabase Docs
https://supabase.com/docs/guides/auth/social-login/auth-github


## Supabaseのプロジェクト

Supabaseのダッシュボードに行きます。

先程作ったSupabaseのプロジェクトを開きます。

環境変数をメモしておきます。

<details><summary>Supabase環境変数メモ</summary>

```

Supabaseプロジェクト
組織 Organization

Project name


Database Password



Region
Northeast Asia (Tokyo)

左サイドバーにある Project setting から

Project Settings > General
Reference ID



Project Setting > API > Project URL



Project Setting > API > Project API keys > anon public



Project Setting > API > Project API keys > service_role secret



Project Setting > API > JWT Settings > JWT Secret





アクセストークン
Supabase | Supabase
https://app.supabase.com/account/tokens

「Generate new token」ボタンを押します。

名前

supabase login アクセストークン



Table Plus接続
postgresql://postgres:[PASSWORD]@db.[Reference ID].supabase.co:5432/postgres

ダッシュボード
https://app.supabase.com/project/[Reference ID]



作成コマンド(link)
supabase link --project-ref [Reference ID] -p [Database Password]

型の取得
npx supabase gen types typescript --project-id [Reference ID]

※出力先は指定します。

```

</details>



## SupabaseのGitHub認証の有効化

Supabaseのダッシュボードから
左サイドバーのAuthentication
Authentication画面のProvidersを選択します。

GitHubを開いて
GitHub enabledを有効化しておきます。

GitHubサイトの方に登録するコールバックをメモしておきます。

コールバック

```
https://[Reference ID].supabase.co/auth/v1/callback

```

一旦そのままにしておいて、
ブラウザの別ウィンドウ、タブを開きます。

----------------------------------------

# GitHub OAuth keys

ブラウザの別ウィンドウで、↓を開きます。

Developer applications
https://github.com/settings/developers

OAuth Apps画面を開きます。

New OAuth Appボンタンを押して新しく作ります。


Register a new OAuth application

Application name
`
vns_masakinihirota

```

Homepage URL(VercelのDomainsを設定)

```
https://vns-masakinihirota-kappa.vercel.app

```

Authorization callback URL(Supabaseで先程取得したもの)

```
https://[Reference ID].supabase.co/auth/v1/callback

```

Register applicationボタンを押します。

```
Client ID
4c0*****cfU

Client secrets
96b*****67U

```

メモしておきます。

----------------------------------------

# クライアントIDとクライアントシークレットの登録

先ほど開いていた、Supabaseの画面に戻ります。

Client ID
と
Client secrets
を入力します。
Saveボタンを押します。



----------------------------------------

# SupabaseにNext.jsアプリケーションのURLの設定

## Supabaseダッシュボード

Supabase プロジェクトで、
「Authentication」 > ↓「URL Configuration」に移動し、

https://supabase.com/dashboard/project/_/auth/url-configuration

Site URLには
先ほどGitHubに
Homepage URL(VercelのDomainsを設定)

Site URL
https://vns-masakinihirota-kappa.vercel.app

同じURLを設定します。

Saveボタンを押します。



----------------------------------------

## Vercel

Vercelのダッシュボードを開きます。

Vercelの環境変数を設定します。
プロジェクトの画面上側にあるSettingsタブを開きます。

左サイドバーの
Environment Variablesを開きます。



```環境変数
NEXT_PUBLIC_SITE_URL

```

という↑環境変数を、↓同じURLで設定します。
https://vns-masakinihirota-kappa.vercel.app

※プレビュー ブランチとローカル開発が正しく動作することを確認するために、
プレビュー環境と開発環境の選択を必ず「解除」してください。
​
✔Production
のチェックはオンのまま

□Preview
□Development
のチェックをオフ

```
Key
NEXT_PUBLIC_SITE_URL

Value
https://nextjs-subscription-payments-deploybutton.vercel.app

```

Saveボタンを押します。



----------------------------------------

# 再デプロイ


新しく設定した環境変数を有効にし、すべてが正しく連携するには、アプリを Vercel に再デプロイする必要があります。


環境変数追加したので、再デプロイをします。


Vercel ダッシュボードで、
現在作業しているプロジェクトを選びます。

上側のタブメニューにある
Deploymentsに移動します。

ビルドしたリストが画面下の方にありますが、
そのリストの一番上のReadyになっている一番右に三点リーダーアイコンがあります。

押すとプルダウンメニューが開き、
Redeployを選択します。

モーダルウィンドウが開くので、
Redeployボタンを押します。

※「既存のビルド キャッシュを使用する」オプションを有効にしないでください。



----------------------------------------

# Stripeの設定

Stripeのダッシュボードを開きます。

ホーム vns_template2 Stripe [テスト]
https://dashboard.stripe.com/test/dashboard

※Stripeは一人のユーザーに付き複数のアカウントを作成できるタイプです。

アカウント名
vns_template2(適当)

アカウントを作り
テスト環境になっていることを確認してください。

ダッシュボードの上側にある そのテスト環境の左に「開発」ボタンあります。
その左の「開発」ボタンを押します。
すると、「開発者」画面が開きます。

開発者のその直下にあるメニュータブ で Webhookを開きます。



## Webhook を作成する

Webhook – vns_template2 – Stripe [テスト]
https://dashboard.stripe.com/test/webhooks

「開発者」画面のWebhookから
「エンドポイントを追加」ボタンを押します。

## 「Stripe イベントのリッスン」ページ

「Stripe イベントのリッスン」ページが開きます。

VercelのDomainsの方を設定します。
https://vns-masakinihirota-kappa.vercel.app

↑このURLに/api/webhooksを追加します。

↓エンドポイント URL を設定します。

エンドポイント URL

```
https://vns-masakinihirota-kappa.vercel.app/api/webhooks

```

説明
適当に入力します。


## whsec_*****の取得

右のエンドポイントの追加のサンプルの中にあります。
次のステップで必要になるので、↓endpoint_secretをメモしておきます。

例：

```
whsec_*****

# This is your Stripe CLI webhook secret for testing your endpoint locally.
endpoint_secret = 'whsec_bc5*****91U'

```
これをメモをしておきます。



## リッスンするイベントの選択

「＋イベントを選択」 を押して開きます。

全イベントを選択をチェックします。
※ちょっと待ちます

「イベントを追加」ボタンを押します。

もう一度、もっと下の方にある
「イベントを追加」ボタンを押します。

すると、
登録したURLが表示され、
「イベントを待っています」と画面に出たら成功です。



上段にある、開発者ボタンを押します。
「開発者」画面に戻り、Webhookを選択すると、

設定されていれば
オンラインエンドポイント
に設定されているはずです。

ステータスが緑文字アイコンで
有効
と表示されています。



----------------------------------------

これまでメモしてきた環境変数をローカルの環境変数ファイル（.envと.env.local）に入力します。

サンプルの環境変数に何をいれるか記入しておきました。
[***]部分を書き換えます。

```.env
SUPABASE_AUTH_EXTERNAL_GITHUB_REDIRECT_URI="[Callback URL (for OAuth)]"
SUPABASE_AUTH_EXTERNAL_GITHUB_CLIENT_ID="[Client ID]"
SUPABASE_AUTH_EXTERNAL_GITHUB_SECRET="[Client secrets]"

```


```.env.local
NEXT_PUBLIC_SITE_URL="[VercelのDomains]"

# These environment variables are used for Supabase Local Dev
NEXT_PUBLIC_SUPABASE_ANON_KEY="[anon public]"
NEXT_PUBLIC_SUPABASE_URL="[Project URL]"
SUPABASE_SERVICE_ROLE_KEY="[service_role secret]"

# Get these from Stripe dashboard
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="[公開可能キー]"
STRIPE_SECRET_KEY="[シークレットキー]"
STRIPE_WEBHOOK_SECRET="[endpoint_secret]"

```





入力例

```.env
SUPABASE_AUTH_EXTERNAL_GITHUB_REDIRECT_URI="https://hbjoaqosoqfdjumfowdr.supabase.co/auth/v1/callback"
SUPABASE_AUTH_EXTERNAL_GITHUB_CLIENT_ID="4c0*****cfU"
SUPABASE_AUTH_EXTERNAL_GITHUB_SECRET="96b*****67U"

```


```.env.local
NEXT_PUBLIC_SITE_URL="https://vns-masakinihirota-kappa.vercel.app"

# These environment variables are used for Supabase Local Dev
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJ*****ObU"
NEXT_PUBLIC_SUPABASE_URL="https://hbjoaqosoqfdjumfowdr.supabase.co"
SUPABASE_SERVICE_ROLE_KEY="eyJ*****6bU"

# Get these from Stripe dashboard
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_51O*****E6U"
STRIPE_SECRET_KEY="sk_test_51O*****qVU"
STRIPE_WEBHOOK_SECRET="whsec_bc5*****91U"

```



----------------------------------------

これで、Vercelとローカルの環境変数ファイルの項目が全て埋まりました。

VercelのほうはRedeployをすると、環境変数の値が反映されます。
Vercel がアプリを再構築して再デプロイしたら、製品と価格を設定する準備が整います。



----------------------------------------

## 製品と価格情報の作成

Next.jsアプリケーションのリポジトリに

```
fixtures\stripe-fixtures.json

```

というStripeの価格設定のサンプルが用意されています。



:::note warn
↓この順番を守ってください。

Next.jsのサーバーを立ち上げて(pnpm run dev)おいてから。
StripeのAPI監視(stripe listen)
価格設定の実行(stripe fixtures)

:::


先ほど取得した、VercelのDomains のURL
https://vns-masakinihirota-kappa.vercel.app/
と
http://localhost:3000/
をブラウザで開いておきます。


↓それぞれVSCodeのターミナルの別ウィンドウで実行します。

```terminal
pnpm run dev

```

```terminal
stripe listen --forward-to http://127.0.0.1:3000/api/webhooks

```

↑stripe listenを実行すると表示されます。

`STRIPE_WEBHOOK_SECRET`の値になります。


```terminal
stripe fixtures fixtures/stripe-fixtures.json

# fixturesフォルダをsrcフォルダの下に移動している場合
stripe fixtures src/fixtures/stripe-fixtures.json

```

↑サンプルの価格を設定します。

公式リポジトリのデモ画面のように
Pricing Plansと表示されています。

VercelのDomains のURL
https://vns-masakinihirota-kappa.vercel.app/
と
http://localhost:3000/

それぞれリロードすると、価格の設定が反映されているはずです。
反映されていないのならば、環境変数の設定が間違っている可能性が高いです。



----------------------------------------

# 認証設定の確認

お試し

まず、サーバーのSupabaseで

プロジェクトを開き、
Authenticationを開き、
Providersを開きます。

Emailを開きます。

Confirm email
Secure email change

の2項目を無効化します。

Saveボタンを押します。

これで確認せずユーザーが作れます。

※お試し中なので、後で戻しておいてください。



Next.jsアプリケーションに戻り、

右上の「Sign In」ボタンを押します。

アカウントを持っていないので、
「Don't have an account? Sign up」 ボタンを押します。

適当なユーザーを登録します。
確認を無効化してあるので、形式が整っているだけでユーザーを作成できます。

masakinihirota@gmail.com
「１２３４５６７８９０」

に適当なユーザーを登録します。

※不正なメールアドレス＆パスワードだとあちこちで引っかかります。
(存在しなかったり、短かったり、英数が混在してなかったり等)


Supabaseのダッシュボードに戻り、
Supabaseniの
Authenticationの
Manage
Users
を見てみると、ユーザーが登録されています。

SupabaseのTable Editorに行き、
登録したユーザーを右クリックすると
Delete low ボタンで削除できます。

そうすると
Authenticationテーブルのユーザーも削除できるようになります。
※逆に言えば、publicのusersテーブルにユーザーが残っていると削除できません。

※publicとはPostgresのテーブルスキーマ名です


----------------------------------------

# Stripeの購入テスト。

あとは、Stripeの購入テストです。
ダミーのカードデータを使って購入のテストをします。

Next.jsアプリケーションの
GitHub認証を利用して
Sigin Inしておきます。

Next.jsアプリケーションに戻り、
商品のどれかの
「Subscribe」ボタンを押します。

そうすると、
Stripeのカード支払い画面が出てきます。

※TEST MODEであることを確認してください。



ダミーのカード番号は↓こちら

Test payment methods | Stripe のドキュメント
https://docs.stripe.com/testing?locale=ja-JP

```
カード情報
4242 4242 4242 4242 (Visa)

存在する現時点以降 月/年
12/34
↑2034年12月

セキュリティコード
任意の 3 桁の数字
123

カード保有者の名前
masakinihirota

請求書の住所
日本
123-4567
東京都あいうえお市
1丁目2番地

```

「申し込む」ボタンを押します。

暫く待つと、トップページに戻ります。
30秒～1分ほど



## 確認

トップページの左上にある
Account ボタンを押します。

Your Planとして
先ほど購入した商品が表示されています。



----------------------------------------

以上で終了です。

----------------------------------------

# 応用編

----------------------------------------

# ローカルでの開発環境

ここまでは
Next.js はサーバー
Supabase はサーバー
というパターンで開発環境を設定してきました。

次はローカルで開発するための環境変数を設定します。

それぞれ、パターン１，２，３と分けます。

:::note info
パータン1 （今回の記事）
Next.jsサーバー (Vercel等)
Supabaseサーバー

パターン2
Next.jsローカル
Supabaseサーバー

パターン3
Next.jsローカル
Supabaseローカル (Docker)

※Stripeはテスト環境だけです。
本番環境の設定等は自己責任でお願いします。

:::

詳細は↓

# 参考

Next.js App Router と Supabase と Stripe のスターターアプリに色んなパターンの環境変数を設定 #Next.js - Qiita
https://qiita.com/masakinihirota/items/1ae7d17377b8bac524d5

↑パターン １，２，３の設定の仕方が書かれています。

# 最後に

デプロイボタンを利用すると楽ですが、
環境変数の設定が初めてとか初心者の場合、混乱してしまうと思います。
どの値の設定が間違っているのかを探すのは大変でした。
ですので、デプロイボタンは利用せずに、調べながら設定したほうがいいと思います。