概要

Next.js(App routor)と決済サービスのstripeを使って簡単な決済機能を実装する流れを数回に分けて書いていきます！

stripeのアカウントの作成

Next.jsのプロジェクトを作成

npx create-next-app@latest

npm run devコマンドを実行すると上記で作成したnext.jsのプロジェクトがローカル上で起動します。

npm run dev

npm install stripe

stripeの管理画面に記載してあるシークレットキーをenv.localに記載

stripeの管理画面の右上の「開発者」をクリック

「APIキー」タブに記載

env.local

STRIPE_SECRET_KEY='ここに上記のシークレットキーを記載'

※stripeの管理画面ではテスト環境で実施した方が良いかと思います。

次回は実際にコードを書いていきますのでお楽しみに！