Fastest way to build a SaaS in 2024 - Next.js, Supabase & Stripe
Вставка
- Опубліковано 21 лип 2024
- In this video, Jon Meyers demonstrates how to use Vercel's Subscription Payments Template [1] to bootstrap a Software as a Service product, deployed to production, that can take very real payments!
▶ Get started with Supabase: supabase.com/?...
[1] github.com/vercel/nextjs-subs...
Next.js is one of the most popular modern web frameworks that allows for client and server logic to be interwoven seamlessly. Supabase is a collection of open source tools that wrap around a PostgreSQL database. The `@supabase/ssr` package is the layer that glues these technologies together, configuring cookie-based auth so the user and their session are available throughout the entire Next.js stack.
00:00 The fastest way to build a SaaS product
00:18 Deploying template with Vercel
01:40 Setting Environment Variables
04:28 Creating subscription tiers
06:27 Configure OAuth with GItHub
09:54 Setup Stripe Customer Portal
12:05 Activate Stripe Account
Build SaaS apps and start making real money in 2024 with our latest video. We're showing you the fastest way to build a SaaS product using Vercel's subscription starter, Supabase for backend magic, and Stripe to handle those all-important payments. This isn't just about getting set up; it's about getting your SaaS out there and starting to see the cash flow in.
What you will learn:
✅ Fork and Deploy: Kick things off by forking the Stripe subscription starter to your GitHub. It's the first step to getting your SaaS off the ground.
✅ Supabase Integration: Add the Supabase integration to your project, a crucial move for managing your backend and getting your product ready for use.
✅ Stripe Setup: Get your Stripe account up and running. We'll go through activating your account and setting up those key API keys, so you're ready to take payments.
After this video you will be able to:
✅ Launch Your SaaS: With your Vercel project deployed, your Supabase backend sorted, and Stripe ready to process payments, you'll be set to launch your SaaS product.
✅ Handle Real Payments: With Stripe activated, you're all set to handle real transactions. Say hello to earning from your SaaS product thanks to Supabse integration!
✅ Manage Subscriptions: Dive into Stripe's dashboard using Supabase for the backend to create and manage subscription tiers, giving your users options and boosting your revenue potential.
💻 Videos to watch next:
▶ Fastest way to host a Postgres database: • FASTEST way to host a ...
▶ Fastest way to get started with Next.js and Supabase: • FASTEST way to get sta...
▶ 10 new Supabase features you need to start using: • 10 new Supabase featur...
👇 Learn more about Supabase 👇
🕸 Website: supabase.com/
🏁 Get started: app.supabase.com/
📄 Docs: supabase.com/docs
🔔 Subscribe for more tutorials and feature updates from Supabase: / @supabase
📱 Connect with Us:
▶ GitHub: www.github.com/supabase/supab...
▶ Discord: www.discord.supabase.com/
▶ Twitter: / supabase
▶ Instagram (follow for memes): / supabasecom
ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.
Build in a weekend, scale to millions.
#Supabase #AppDevelopment #RealtimeApps #DeveloperTools - Наука та технологія
![Interview with Senior JS Developer 2024 [NEW]](/img/n.gif)
If you're looking for how to build AI (RAG) applications quickly...
you'll probably want to follow this one: ua-cam.com/video/ibzlEQmgPPY/v-deo.html
"I am gonna show you Fastest Possible way to build a Saas product and start making Real money" never expect less from a Supabase intro
When supabase stops being so sensational, my intros will stop being so sensationalised! 😆
Straight to the point and a ton of valuable information. Really looking forward to more videos.
So good, waiting for the next videos. Thank you guys, great work!
Next week is Local Dev! 🚀
the cleanest of that video is .... damn..... it's try it's the fastest way to build a saas in 2024.. all those steps packed in one video.
Amazing and so detailed video :)
Thanks! Glad you enjoyed it! What would you like to see next?
This is a cool video! Great job Jon!
Thanks Florin! Glad you enjoyed it! 🙌
What would you like to see next?
Good stuff man! Can you do a tutorial on multi-tenant applications next?
great as always
wonder whats the better stripe integration approach. The one outlined in this vid with synced tables via webhooks or with Stripe Postgres Data Wrappers?
Is anyone else having trouble when installing the template from vercel? I can't get past the add integration with supabase, the modal window that pops up keep loading and does not respond, even though in the background it does create all the supabase services and everything it seems.
Great video! Thank you. How can I add the product features from stripe to Supabade? What are the required changes to the template?
Great video! one question: what do I need to change if I switch to a custom domain instead of the stripe domain?
Do I always need to create a users table in the public schema?
Is this using NextJS API routes to handle the webhook events from stripe to sync the prices, products and subscriptions or supabase edge functions?
Awesome ❤
I don't understand how the postgres database has been synchronized with stripe (prices, subscription, profucts...) how is this done?
Step 2 in the deployment template doesn't work for me it bugs out and doesn't seed the database
Hey guys, I am having a super high webhook error rate (can be seen on the stripe dashboard under developers -> webhooks). Is this normal?
Not sure if something has changed in the last 2 weeks, but the tutorial breaks down after switching over to the live stripe keys, where managing the subscription or going to the customer portal throws an error/toast for new accounts/subscriptions as well as existing accounts that has already subscribed. Updating it to a live webhooks key doesn't work either. I am very new vercel, supabase and general ops stuff, but I'll try to debug and will report back if there's a solution.
I'm having the same thing. Did you figure it out?
I have surround sound I kept thinking some squirel was in the attic.
Used this starter last year was pretty buggy. Maybe need to try a fresh start and port some stuff over
not bad Supabase, not bad 👏👏
@supabase Hi! Thanks for the tutorial! It works well except for going live. Is anyone else having this issue?
How about paddle or Lemonquezzy? Stripe is not available in my country
Yeah, it would be great to have that.
I love Supabase. I just started using Supabase Auth for my new project with Next.js. I'm just wondering why there are so many auth requests in the Supabase Dashboard - more than 3k auth requests (/auth/v1/user, /rest/v1, /rest/v1/health) for just a single user within 3-4 hours. Is that normal or am I doing something wrong? I'm using Next.js Middleware according to the Supabase documentation.
I noticed the same thing on a test project of mine. Have you found out if there was something wrong?
Same thing happened for me, I ended up running it locally to avoid that.
What about role based permissions. ? SOme video about that will be awesome
Thor is working on exactly this! Coming soon!
❤❤❤
Glad you enjoyed it! 🙌
Hi Jon. I need some very real payments. Thanks!
lol
That’s the only missing piece - actually getting the very real payments! 😆
Good!
But what about other gateways? Because Stripe is not available in my country
What if we don't have stripe in our country,
Which country?
@@meowmeshTurkey😂
well you have to find a way to get it lol. you can consider Stripe Atlas to incorporate your business in the US or do it yourself using registered agents
PayPal is sometimes another good option 👍
Now just need a tutorial on business ideas 🤣
Please and please make a React-only version. I am trying to build my SaaS but don't want to use Next. I want to focus solely on SPA.
Will add it to the list! 🙌
You will likely need a secure backend for this, though
How can I add a free plan?
Just default value
Please use another Frameworks to do this kind of videos, NuxtJs for example,
Am working on some Nuxt content atm! Coming soon!
😢 We don’t have Stripe in Iceland.
Is PayPal an option?
Yes it is, Braintree to be specific.
hi
Speedy and valuable! But stripe don't support saudi arabia 😢
Damn! Maybe PayPal is an option?
@@JonMeyersDoes Paypal has extension in Supabase and provide Subscriptions?
This is not even close to being the fastest as it introduces database sync for the data that is already available in Stripe. Talk about over engineering just to promote Supabase.
Code can be simplified and still utilize Supabase which is a great product. With the presented architecture there is always a chance that Stripe data and Supabase data (that syncs stripe data) will be out of sync. This will happen and it will cause you incredible headaches. Get the data directly from Stripe which should be the only source of truth.
Agreed. Not having Stripe as a source of truth caused many headaches for my team. My company synced Stripe data into MongoDB and it was difficult to maintain. It took us about a year to fully migrate to just using Stripe and has been so much easier to manage.
This explains how to set up a template but doesn't actually teach you anything about how to implement this in your own project. Pretty bad.