Local Development for SaaS product in 2024 // Next.js, Supabase and Stripe

The Next.js App Router, Supabase and Stripe are a powerful combination for building a SaaS product. In this video, Jon Meyers configures a Local Development environment, keeping new features isolated from production.
• Fastest way to build a...
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 Local Development for SaaS product
00:21 Cloning Github repo
01:08 Setting Environment Variables
03:30 Configuring Supabase stack for Local Development
06:18 Creating subscription tiers in Stripe
08:48 Setup Customer Portal
10:05 Why we need Branching
💻 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...
▶ Fastest way to build a SaaS in 2024: • Fastest way to build a...
👇 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: github.com/supabase
💬 Discord: 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

[@StefanRows]

Best video series in Next.js and Supabase by far. Not a single error, all on-point. Keep it up! Absolutely amazing!

[@jaronfort9097]

I would like to see a video on how to actually get Realtime to work in local development.

[@eleah2665]

Fourth! Hi Jon. Thanks.

[@luizvictoriobaptistaneto1561]

For some reason, stripe CLI was not working, even after pnpm install. Installing it globally solved the problem.

[@abdulazizyas67]

I have a question, can I have ExpressJs in Supabase functions instead of Deno server? I noticed that you added this feature in Edge functions Docs, specifically in Handling Routing in Function, is there any drawbacks using ExpressJs instead of Deno server?

[@mohammeddev8288]

hi , can you guys make a video to how use supabase with flutter riverpod ,because i have a lot of issues when I'm using supabase with it , specially when I am trying to lesson to the user state

[@shafu_xyz]

i wanted to have schema locally saved for(version controlling) but without local DB. I just want to use a hosted prod DB and hosted stag DB(dev) for all dev and prod needs. how can i achieve this? right now i see some hiccups while pulling and pushing to hosted stag DB, eg: errors like "migration already exist" etc.. i wish there is bespoken way to achive this usecase in form of blog post etc..

[@rtorcato]

This is ok for one dev, but it's very easy to get out of sync with stripe on local dev if you have multiple devs. Will supabase dashboard support foreign data wrappers on local dev?

[@TobiasMars]

will this also be the same for Remix.js? Would be nice if you could make a tutorial with Remix :D

[@IkraamDev]

Supabase > PlanetScale

[@FernandoFalci]

First!

[@selambengp]

Only React please 😂❤ No Next js

[@carloszapata4514]

For frontend is the same code. To make a video like this as full stack react would take a long time.

[@fullstackwebdev2996]

NEXT_PUBLIC_SUPABASE_ANON_KEY="
I had to cut and paste the ANON key into my .env.local from supabase output