Your cart is empty.
Keep shopping画像生成AI SaaSを作りながらNext.js App RouterとStripeサブスク決済機能が学べる実践開発講座
342 students
画像生成AI SaaSを作りながらNext.js App RouterとStripeサブスク決済機能が学べる実践開発講座
Next.js App Router/Stripe/Clerk/Prisma/Stable Difussion APIを使ってAI SaaSを開発します。個人開発では必須のStripe決済機能実装とClerk認証まで学べます。
Created byShin Code
Last updated 6/2025
Japanese
Japanese [Auto],
What you'll learn
- 画像生成AI SaaS開発を通してNext.js App Routerが学べる
- AI(Stable Diffustion)のAPIを使ったAI画像生成ができる
- Stripe決済サービスを使ったサブスクリプション決済が実装できる
- Clerkを使ったユーザーOAuth認証機能が実装できる
- TiDBを使ってデータベースの運用と管理ができる
- shadcn/uiを導入して高品質なUIが構築できる
- SaaSで一般的なダッシュボードページUIが実装できる
- ダッシュボードページをレスポンシブに対応できる
- Next.js App Routerで登場したServerActionsでフォーム実装ができる
- useActionState()を使ったServerActionsの実装ができる
- 画像バイナリデータの取り扱いが分かる
- sharpを使って画像圧縮と最適化ができる
- 画像ダウンロードボタンの実装方法が分かる
- StripeとClerkのWebhookを使ったトリガーイベント管理ができる
- ngrokを使ったWebhookテスト手法が分かる
- Prisma ORMを使ってTiDBへクエリできる
- Clerk認証時にデータベースやユーザー情報の追加実装ができる
- 生成AI系のアプリケーションで必須のクレジット機能が実装できる
- クレジットの有無によって課金ページへのリダイレクト処理ができる
- ストリーミングデータフェッチングが実装できる
- 松竹梅プランの課金ページが作れる
- Stripeを使ったチェックアウト決済が実装できる
- Stripeの顧客情報をTiDBへ保存できる
- Stripeポータルを使ったサブスクリプション管理が実装できる
- ユーザープロフィール管理用の設定ページが作れる
- Prismaのトランザクション機能を使ったデータ削除が実装できる
- Claudeを使ったエラー解決法が分かる
- Boltを使って高品質なLPの作り方が分かる
- Cursorを使ったAI駆動開発が少し学べる
- GithubとVercelを連携してデプロイできる
- ビルドエラーの際の対処法が分かる
- ClerkとStripeを本番環境に移行させる方法が分かる
- 個人開発やAI駆動開発の今後の学び方が分かる
Explore related topics
Course content
11 sections • 98 lectures • 8h 57m total length
Requirements
- HTML/CSSの基礎が分かる
- Reactの基礎知識(コンポーネント/JSX)がある
- Nextjsを一度でも触れたことがあるとスムーズに理解できる
Description
AI画像生成SaaS(Software as a Service)をハンズオンで作りながらNext.js App Routerでフルスクラッチ開発する講座です。個人開発には必要な「ユーザー認証」「決済」「データベース」まで全て用意して実装する内容です。AIが使える今の時代でも開発全体フローを理解することは重要です。本講座を完成した暁には、作ったWebアプリケーションを応用して皆さんの個人開発のお役に立つことは間違いないでしょう。
■ 本コースの対象者
SaaSをNext.js App Routerでフルスクラッチ開発で実装してみたい方
AIのAPIを使ったAI画像生成機能の実装を作ってみたい方
認証から決済、それらをデータベースへ保存する流れをハンズオンで理解したい方
これから個人開発でアイデアを形にしていこうと思っている方
モダンな技術スタックで開発してみたい方
■ 本コースを受講する際の注意点
Next.jsで開発経験があると、スッと頭に入ってくると思います。ただこれからNext.js AppRouterを学ぶ方でも理解できる内容です。
Reactの基礎知識(コンポーネント / JSX等)を前提に解説しています。
本講座は9時間程度の大きなボリュームの講座となっています。
お値段に対して得られる価値は相対的に高いと自負しておりますので、ぜひ講座から学びをたくさん吸収して
いただけると私ShinCodeとしても嬉しく思います。
Who this course is for:
- AI画像生成SaaS開発を通して、開発全体のフローを理解したい方
- Next.js App Routerを使った個人開発のやり方をハンズオンで学びたい方
- 認証と決済を組み合わせたアプリケーション開発ができるようになりたい方
- これから個人開発でマネタイズやポートフォリオを作っていきたい方
- AIだけに頼らない知識と実装力を身に着けたい方