OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

【Stripe決済実践】Next.jsとSupabaseで動画レッスン販売アプリを作りながらStripeを学ぶ実践講座

Shin Code

本講座では動画販売Webアプリケーションを作りながら、Stripe決済の実装を学ぶ実践講座となっています。サブスクリプション決済を通してどのようにWebアプリに決済を導入するのか、Next.js14とSupabaseの最新バージョンを利用して学ぶことができます。ご自身のWebアプリにマネタイズ機能を付けたい方は必見の内容です。

■ 本コースの対象者

Read more

本講座では動画販売Webアプリケーションを作りながら、Stripe決済の実装を学ぶ実践講座となっています。サブスクリプション決済を通してどのようにWebアプリに決済を導入するのか、Next.js14とSupabaseの最新バージョンを利用して学ぶことができます。ご自身のWebアプリにマネタイズ機能を付けたい方は必見の内容です。

■ 本コースの対象者

  • Stripe決済機能を実装してみたい方

  • 個人開発で決済機能を実装する必要が出てきた方

  • 実務開発でStripeを利用することになった方

  • Next.js14やSupabaseも同時に学び、開発技術の幅を広げたい方

  • サブスクリプション決済を実装してマネタイズをしてみたい方

  • Next.js特有のRSCの考え方を理解したい方

■ 本コースを受講する際の注意点

  • HTML/CSS/JavaScriptに関する基本的な知識があることを前提としています。

  • Reactの基礎（コンポーネント、JSX記法など）についての理解が必要です。

  • JavaScriptに関する実務経験があると、よりスムーズに講座を進めることができます。

また本講座ではSupabase Functions/Trigger/Webhooks/Authentication/Table/SQL/RLS等のSupabaseのコアな内容も取り扱っています。またセッション管理にはCookiesを利用していますので、それら周辺も学んでみたい方はぜひご検討ください。

Enroll now

14 deals to help you save

We found 14 deals and offers that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Use code at checkout. Valid until December 3
Cyber Monday
Develop career-changing skills with these steeply discounted courses.
Up to
85%
off
BFCMSALE24
Use code at checkout. Only 16 hours left!
Black Friday
Develop career-changing skills with these steeply discounted courses.
Up to
85%
off
BFCMSALE24
Use code at checkout. Valid until December 1
For new customers
Save when you purchase top courses. For new customers only.
Special Offer
UDEAFNULP2024
Valid for a limited time only
Future-proof your career
Access O'Reilly books, live events, courses, and more. Save with an annual subscription.
Take
15%
off

What's inside

Learning objectives

  • Stripe/nextjs/supabaseを使って動画講座販売アプリケーション開発ができる
  • Nextjs14の新バージョンでrscを考慮したアプリ開発ができる
  • Nextjs14対応のsupabaseモジュールを使ってユーザーセッション管理ができる
  • Stripeを使ってサブスクリプション決済機能を実装できる
  • Shadcn/uiでuiライブラリをwebに導入できる
  • Nextjs14のssg/ssrについて理解できる
  • Supabase table作成の際に外部キー接続の方法が分かる
  • Supabase cliを使ってtableデータから型定義を抽出できる
  • Cookiesを利用してユーザーセッションできる
  • Supabase authenticationでgithubのoauth認証ができる
  • ユーザー状態を監視してuiコンポーネントの切り替えができる
  • 認証用コードを利用してセッションが確立できる
  • Supabase database functions/trigger/webhooksの実装方法が分かる
  • Stripe顧客ユーザー作成apiが構築できる
  • Postmanを使ってapiテストができる
  • Stripeでサブスクリプション商品が作成できる
  • Supabaseでrlsポリシー設定ができる
  • Ngrokを利用してローカルサーバーを一時的にパブリック状態にできる
  • サブスク会員だけが閲覧できるプレミアムコンテンツ設定ができる
  • Nextjs14でyoutube動画を表示する方法が分かる
  • 非同期処理の直列・並列データフェッチングの違いが理解できる
  • カードチェックアウト決済の実装ができる
  • Stripeのカスタマーポータルを作ってapi呼び出しができる
  • ユーザー管理ダッシュボードページが作れる
  • サブスクリプションの登録・変更・キャンセルができる
  • Vercelを使って本番環境へデプロイができる
  • Cookiesを利用している際のnextjsビルドエラーが回避できる
  • Show more
  • Show less

Syllabus

はじめに
本講座で学べる事
本講座の完成品デモ
Supabaseの初期セットアップやテーブルの追加、データ取得やNext.jsの基本を学べます
Read more
Next.js14の環境構築とSupabaseの初期セットアップを始めよう
Supabaseでレッスン用テーブルを作成しよう
createClientComponentClient()とcookiesを利用してsupabaseのセットアップしよう
レッスンテーブルからデータを取得して表示してみよう
shadcn/uiを使ってカードを作ってみよう
関数宣言の追加とSSGとSSRについて
ビルドでSSG/SSRの確認とpreview環境で動作確認してみよう
講座レッスン詳細ページを作成しよう
Supabase CLIでDataBase型を作成してTypescript宣言をしよう
詳細レッスンデータをブラウザへ出力しよう
詳細ページにおけるcookies使用のエラーを解決しよう
SupabaseAuthenticationを利用したOAuth認証やNext.jsのCSRを考慮したナビゲーションバー等を作ります
Supabase AuthenticationのOAuth認証(Github)を実装しよう
ヘッダーコンポーネントを作成しよう
Github認証でサインイン機能を実装してみよう
Server ComponentとClient Componentの境界を作ろう
サインイン実装とセッション状態をブラウザで確認しよう
サインアウト実装とUIボタンの切り替えをしよう
認証用コードを利用してセッションを確立しよう
プロフィールテーブルの作成とDatabase Function/Triggerを作成して認証時に自動DB保存ができるようになります。
プロフィールページの作成と認証ユーザーidとの外部キー接続
プロフィールテーブルへ自動でユーザー情報を格納する関数を作成しよう
Supabase Trigger Functionを作成しよう
OAuth認証時に自動でプロフィールデータが作成されるか確認しよう
Stripeアカウントの作成や顧客情報を保存するAPIの構築ができるようになります。またSupabaseのWebHooksが理解できます。
Stripeアカウントの作成とシークレットキー設定をしよう
Stripe顧客ユーザー作成APIの構築をはじめよう
Postman/ThunderClientを利用してAPIテストをしよう
プロフィールテーブルにもStripe顧客IDを保存しよう
プロフィールデータが更新されないエラーをRLSポリシー設定で解消しよう
パブリック状態のAPIに制限を付与しよう
Supabase WebHooksを使ってAPIコールタイミングを設定しよう
ngrokを使って一時的にローカルサーバーを外部Webサーバーに配置しよう
Stripeにメールアドレスが登録されないエラーを解決しよう
サブスク会員登録と会員だけが見れるプレミアムコンテンツが作成できるようになります。
サブスク会員だけが閲覧できるテーブルを作成しよう
サブスク限定動画をデータフェッチングしてみよう
Next.jsでYoutube動画を表示する方法
非同期処理の並列データフェッチング
サブスク商品(月払い/年払い)を作成しよう
サブスク商品価格ページを作成しよう
商品プランデータをStripeからデータフェッチしよう
商品プランデータを整形して取得してブラウザに表示しよう
プラン情報にTypescriptの型定義をしよう
セッション状態に応じてサブスク契約ボタンUIを切り替えよう
プロフィールデータを取得する関数を作成しよう
サブスクリプション契約コンポーネントを作成しよう
サブスク決済APIの作成をはじめよう
カードチェックアウト決済の実装をしよう
決済ページへリダイレクトさせよう
決済成功ページとキャンセルページを作成しよう
Stripe Webhooksとサブスクリプション管理ができるようになります。
Stripe WebHooksを作成しよう
サブスク決済イベントを受け取れるか確認してみよう
WebHooksの通知を受け取るAPIを実装しよう
サブスク契約に成功したらプロフィール情報を更新しよう
サブスク管理用のダッシュボードページを作成しよう
ヘッダーにダッシュボード用ナビゲーションを追加しよう
Stripeのカスタマーポータルのセットアップをしよう
カスタマーポータルAPIを作成してサブスク更新処理を実装しよう
サブスク更新＆キャンセルした時にプロフィールデータも更新しよう
実装したアプリケーションをVercelへデプロイする方法を学びます。本番環境への環境変数設定なども行います。
本番環境へのデプロイの準備をはじめよう
Vecelのセットアップと環境変数の設定をしよう
SupabaseとStripeで設定しているドメインの変更と動作確認
Page couldn't be rendered statically because it used `cookies`の解決
RouterHandlerの修正とレッスン動画の追加の動作検証
さらにNext.jsやStripeやSupabaseを勉強する方法が分かります。
ボーナスレクチャー

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
本講座はSupabaseに関する基礎知識があることを前提としており、Supabaseの基本機能やNext.jsとの統合方法を習得できます。
本講座では、Stripeのサブスクリプション決済を実装した動画配信Webアプリケーションの作成を通じて学習できます。
本講座はNext.jsの最新バージョンである14を利用しており、React Server Componentsに関する知識を深めることができます。
本講座は、動画配信Webアプリケーションの作成やサブスクリプション決済の実装に関心のある個人開発者や実務開発者に適しています。
本講座では、Supabase AuthenticationによるOAuth認証やRLSポリシーの設定など、Supabaseの高度な機能を扱います。
本講座では、Next.jsのSSG/SSRやshadcn/uiによるUIライブラリの導入など、Next.jsの最新機能を学ぶことができます。

Save this course

Save 【Stripe決済実践】Next.jsとSupabaseで動画レッスン販売アプリを作りながらStripeを学ぶ実践講座 to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 【Stripe決済実践】Next.jsとSupabaseで動画レッスン販売アプリを作りながらStripeを学ぶ実践講座 with these activities:
復習：HTML/CSS/JavaScriptの基礎
動画販売アプリケーションを開発する前に、HTML/CSS/JavaScriptの基本を復習し、強固な基礎を築きましょう。
Browse courses on HTML
Show steps
  • オンラインリソースやチュートリアルを参照して、HTML/CSS/JavaScriptの構文と概念を確認する
  • 簡単なプロジェクトを作成して、これらのスキルを実際に練習する
Reactの基礎練習
Reactのコンポーネント、JSX記法、その他の基礎を練習することで、動画販売アプリケーションの開発に不可欠なスキルを強化しましょう。
Browse courses on React
Show steps
  • Reactのドキュメントを参照して、コンポーネントのライフサイクル、状態管理、プロパティについて理解する
  • オンライン演習や課題に取り組み、Reactの概念を実際に適用する
Supabaseの基本チュートリアル
動画販売アプリケーションのバックエンドを構築するために、Supabaseの基本機能を習得しましょう。
Browse courses on Supabase
Show steps
  • Supabaseのドキュメントを参照して、データベースの作成、クエリの実行、認証の管理方法について理解する
  • Supabaseの公式チュートリアルに従って、基本的な操作を練習する
Three other activities
Expand to see all activities and additional details
Show all six activities
サンプル動画販売アプリケーションを作成する
動画販売アプリケーションのシンプルなプロトタイプを作成することで、Next.js、Supabase、その他の関連技術の理解を深めましょう。
Browse courses on Next.js
Show steps
  • 動画販売アプリケーションの基本的なアーキテクチャを計画する
  • Next.jsを使用してフロントエンドを作成する
  • Supabaseを使用してバックエンドデータベースを設定し、データ操作を行う
  • Stripeを使用して決済機能を実装する
Next.jsとSupabaseを使ったワークショップに参加する
実世界のシナリオでNext.jsとSupabaseを使用している開発者や専門家とつながり、実践的な学習を深めましょう。
Browse courses on Next.js
Show steps
  • Next.jsとSupabaseに関するワークショップやセミナーを探す
  • 参加して、講師や参加者から学び、質問をする
他の学習者に指導する
学んだ概念やスキルを他の人に教えることで、自身の理解を深め、さらにマスターしましょう。
Show steps
  • 学習グループ、オンラインフォーラム、またはコミュニティに参加する
  • 他の学習者から質問を受け、回答する
  • 新しい学習者向けのチュートリアルやリソースを作成する

Career center

Learners who complete 【Stripe決済実践】Next.jsとSupabaseで動画レッスン販売アプリを作りながらStripeを学ぶ実践講座 will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to 【Stripe決済実践】Next.jsとSupabaseで動画レッスン販売アプリを作りながらStripeを学ぶ実践講座.
電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座
Most relevant
【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座
Most relevant
8. 実践編：サイバーセキュリティ関連の職に就く準備
Most relevant
セキュア ソフトウェア開発：実装
Most relevant
【英会話の苦手意識を克服】実践の場で使える「時制」の基礎知識ー中学英語おさらい講座２ー
Most relevant
【2023年5月改訂版】実践 Python データサイエンス
Most relevant
基本のトマトソースで多くのメニューと地頭の良い子どもを育てよう！～基本のトマトソースと展開事例～
Most relevant
【No２コース...
Most relevant
【英文法で学ぶ】SVOC英会話 -文型の知識を土台に英会話/英作文力を磨く
Most relevant
Course image
Effort
5 total hours
Via
Udemy
Instructor
Shin Code
Language
日本語
Good to know
本講座はSupabaseに関する基礎知識があることを前提としており、Supabaseの基本機能やNext.jsとの統合方法を習得できます。
本講座では、Stripeのサブスクリプション決済を実装した動画配信Webアプリケーションの作成を通じて学習できます。
本講座はNext.jsの最新バージョンである14を利用しており、React Server Componentsに関する知識を深めることができます。
本講座は、動画配信Webアプリケーションの作成やサブスクリプション決済の実装に関心のある個人開発者や実務開発者に適しています。
本講座では、Supabase AuthenticationによるOAuth認証やRLSポリシーの設定など、Supabaseの高度な機能を扱います。
本講座では、Next.jsのSSG/SSRやshadcn/uiによるUIライブラリの導入など、Next.jsの最新機能を学ぶことができます。
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser