OpenCourser brand icon
Sign in
Sorry, this page is no longer available
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

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

4.6 Filled star Filled star Filled star Filled star Half star
Based on 54 ratings
see reviews
Shin Code

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

■ 本コースの対象者

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

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

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

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

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

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

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

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

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

Traffic lights

Read about what's good
what should give you pause
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

Create your own learning path. Save this course to your list so you can find it easily later.
Save

Reviews summary

Stripe決済実践next.js & supabaseアプリ開発

受講者によると、本コースはStripe決済をNext.js 14とSupabaseで動画レッスン販売アプリに実践的に実装する方法を学ぶ上で非常に好評です。特にRSC（React Server Components）の概念理解が深まり、環境構築からVercelへのデプロイまで一貫してハンズオンで学べる点が高く評価されています。講師の説明は丁寧で分かりやすいと多くの学生がコメントしています。一方で、Next.jsやSupabaseに関する基本的な知識が前提となり、中級者向けの難易度であるとの意見も複数あります。また、技術スタックのバージョンアップによるコードの微修正が必要な場合があるとの指摘もありますが、これは自力で対応可能な範囲とされています。
技術の急速な進化により、一部でバージョン間の差異が見られる。
"Next.jsの最新バージョンに合わせたコードの微修正が必要な箇所がいくつかありましたが、自力で対応できる範囲でした。"
"数ヶ月前に購入しましたが、Next.jsのバージョンアップが早く、動画内容が一部古くなっている点がありました。特にSupabaseのクライアント関連で苦労しました。"
"時々、動画と現在のバージョンでUIが違うことがありましたが、大筋で問題ありませんでした。"
講師の説明が丁寧で分かりやすく、スムーズな学習が可能。
"講師の説明が丁寧で、SupabaseのAuthやRLS、Webhooksまで体系的に学べたのが良かったです。"
"講師の説明が非常に分かりやすく、詰まることなく進められました。"
"コードも綺麗で、理解しやすかったです。"
Next.js 14やSupabaseの最新バージョンに対応しRSCも解説。
"特にRSCの概念がよく理解できました。"
"Next.js 14のRSC対応もばっちりです。"
"最新のNext.js 14とSupabaseを使った具体的な実装方法が学べ、実際の開発にすぐに活かせました。"
Stripe, Next.js, Supabaseを統合した実践的なアプリ構築が可能に。
"最新のNext.js 14とSupabase、Stripeを使った実践的なアプリ開発が学べ、非常に満足しています。"
"Stripeでのサブスクリプション決済の実装方法が、ここまでハンズオンで学べるとは思っていませんでした。Vercelへのデプロイまでカバーされており、非常に実用的です。"
"このコースだけでプロダクトを作れるレベルだと感じました。"
Next.jsやSupabase、Reactの基礎知識がある程度必要。
"内容自体は素晴らしいのですが、Next.jsとSupabaseの基礎知識が十分でないと、ついていくのが少し大変に感じました。中級者向けだと思います。"
"前提知識が不足していた私にはついていけませんでした。もう少し初心者向けの解説が欲しかったです。"
"実践的で役立ちますが、ReactやJavaScriptの経験が必須だと感じ、基礎がないと途中で挫折するかもしれません。"

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

Similar courses are unavailable at this time. Please try again later.
Course image
Rating
4.6 Filled star Filled star Filled star Filled star Half star
Effort
5 total hours
Via
Udemy
Instructor
Shin Code
Language
日本語
Traffic lights
Read about what's good
what should give you pause
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の最新機能を学ぶことができます。
Share this
Share to help others discover this course.
Facebook LinkedIn X Reddit Link Email
Begin learning today
Enroll now to gain full access to 【Stripe決済実践】Next.jsとSupabaseで動画レッスン販売アプリを作りながらStripeを学ぶ実践講座.
Enroll now
Save for later
Add this course to your list. Find it anytime.
Save
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 - 2025 OpenCourser