Next.jsによる電子記事販売アプリをデプロイしました。
Posted date at 2024-05-22ShinCodeさんのUdemy講座でNext.jsによる実践的な開発手法を学習しました。
Stripe📒という決済サービスを使用することにより、クレジットカード決済を実装できます。
MicroCMS📒を使用することで、コンテンツ（商品情報やブログ記事など）の作成・編集が簡単に行えます。ノーコードでAPIを作成でき、それをフロントで呼び出して表示できます。
🚀講座について
詳細は以下のUdemyリンクをご確認ください。
動画再生4.0時間 林がかけた時間17.75時間
作成したアプリ
※クレジットカード番号は「424242….」を使用してください。
※決済機能はテストモードなので、誤って本物のカード番号をいれてしまっても決済されません。
🚀取り扱った技術スタック
〇MicroCMS
電子記事の登録・編集
〇Stripe
決済
〇Postgres(Vercel)
ユーザ情報、購入履歴情報の格納
〇Authentication（NextAuth）
ユーザ認証（今回はGoogleを使用）
🐡MicroCMS
ヘッドレスCMSと呼ばれるものです。通常のCMSはすでに用意されたレイアウトの中で記事を追加・編集するものですが、こちらは記事の追加・編集のみ取り扱います。表示はフロント側でCMSで用意したAPIを使用して記事を取得して行います。これにより、表示は開発者の好きなように変えることができます。今回は電子記事の登録・編集を行っています。
MicroCMSによる電子記事編集画面
MicroCMSによるAPI作成画面（ノーコードでAPI作成ができます。項目からエンドポイントまでGUIで指定可能です）。
🐡Stripe
あらゆる機能を備えた決済ソリューション（決済機能を提供するものと考えて良さそうです）。アプリケーションからStripeの提供する関数（メソッド）を使用することで、決済機能を簡単に実装することができます。
🚀まとめ
制服アプリを開発していた時から、決済機能を実装した完全なECアプリを実装するにはどうしたらいいのかと漠然と思っていました。Stripeを使用することにより決済機能を簡単に実装できることがわかり、これなら自分でECサイトが作れそうだと感じることができ、気持ち的にプラスになりました。
また、microCMSを知ることができたのも良かったです。アプリ自体もとても使い易いですし、様々な用途で使用できそうです。当ブログの記事はNotionデータベースで作成していますが、ブログ作成についてもこちらの方が使い易いと感じます。記事の内容もデフォルトでhtmlで取得できるので、フロント側での表示の取り扱いもしやすいと感じます。
←ホームに戻る