FASTEST way to get started with Next.js and Supabase in 2024
HTML-код
- Опубликовано: 4 авг 2024
- Today, we're showing you how to create a new Next. js app and link it to your Supabase project in less than 6 minutes!
Next.js and Supabase is one of the most popular combinations in modern web development. In this video, Jon Meyers shows how to get up and running in a single command:
▶ Your Command: $ npx create-next-app -e with-supabase
This creates a brand new Next.js app, already configured to use server-side, cookie-based auth with Supabase.
After this tutorial, you'll be able to set up your app to read and write data, add authentication, and you'll be able to subscribe to real-time changes using Supabase and some fancy AI vector embedding that makes your life WAY easier as a developer.
We're going to start with MPX to run the create-next-app package, choose the with-Supabase template we've set up for you, and get your to-do app up and running in under 10 minutes so you can start pushing out your app.
What you'll learn:
✅ Create and Link: Create a new Next.js app with the with-Supabase template and link it to your Supabase project for full functionality.
✅ Read and Write: Dive into your Supabase project to read and write data, setting the foundation for your app's functionality.
✅ Add Authentication: Implement authentication in your app, allowing users to sign up and log in with their email and password.
✅ Real-Time Changes: Learn how to subscribe to real-time updates in your app, keeping your data synced and up-to-date.
After this video, you'll be able to:
✅ Launch Your App: Have a fully functional to-do app with capabilities to manage tasks, user authentication, and see real-time, live updates as tehy happen.
✅ Use AI Vector Embedding: Incorporate AI vector embedding into your app for advanced features.
✅ Handle Authentication Flows: Manage user sessions and authentication flows smoothly, enhancing your user experience which will keep people coming back!
Chapters:
0:00 What you’ll learn
0:15 npx command
0:47 Next steps & template
2:17 Create a Supabase client - Server component, Server action or Route handler
3:10 Cookies & Next.js auth flow in Supabase
4:00 proof key for code exchange route handler
4:49 getUser feature
💻 Videos to watch next:
▶ Watch all Next.js and Supabase tutorials: • Cookie-based Auth and ...
▶ How to host a Postgres database with Supabase: • FASTEST way to host a ...
▶ This is why you need cookie-based Auth for the Next.js App Router (2024): • Why you need cookie-ba...
👇 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/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 
Наука
⚡Full Next.js series: ruclips.net/p/PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF&feature=shared
🕸 Website: supabase.com/
🏁 Create a project: database.new
📄 Docs: supabase.com/docs
i hope, all teacher in this world learn how to teach from this nice guy. he makes coding feels better
That’s very kind! Glad you enjoyed the video! 🙌
he's very annoying and repulsive tho
What a perfect timing, just yesterday I was thinking about using Supabase as a authentication database for my first ecommerce web project and I was kinda procrastinating a little bit until I saw this new scaffolding tutorial that's going to make my life 10x easier. Thanks
I'm so glad i found this before starting my 2nd project on Supabase with Nextjs .... the 1st project really took me some times to figure it out on the authentication part..
I love your tutorials but Supabase is gotten super confusing with all the turnovers in the documentation. I feel like the way how auth is handled chances all “three weeks” and new ways of handling it are not always updated or clearly stated as outdated. I still had my way of doing with with middleware and the cookies exchange setup with the “auth-helpers-nextjs” but now you’re showing a completely different way. But in the supabase documentation it’s again different. The documentation now uses the new “supabase/ssr” package and this used an “auth/confirm” route instead of the “auth/callback” route. I feel like it’s super confusing and I don’t know which is the source of truth and I even probably introduce some security vulnerabilities because of mixing the wrong technologies you provide. It’s really frustrating to the point I’m not sure if I can safely use it. I really appreciate your positivity and enthusiasm as i know it’s an issue you’re causing. But I’m not sure which is the preferred way to do it and what’s just legacy.
Cool，thank you for introducing this template to us， it majes our life easy with supabase auth + nextjs ❤
God bless you this saved me a ton of time, I really didn't want the hustle.
live, love, supabase
Very cool!
Thanks! Glad you enjoyed it! 🙌
I'm trying to make a navbar with useState but that's for client components only, so I cant set use client in the navbar since the AuthButton uses server for the auth functions. So there's no way for me the create a dynamic navbar with state. Do you know how I can fix this? Thanks
Amazing 🔥🔥
Glad you liked it! 🙌
Please create a guide about using Supabase with SSG. Is it even currently possible for any routes using sessions due to cookies?
Hey thanks for this. I have literally set up everything using auth helpers with cookies, from signup form to middleware to callback.
Im using the NextJS approuter with basic email and pass signup offered by supabase atm.
Do you plan to do a simple migration video on that as well?
Loving supabase, but would love to see some sveltekit mixed in.
Thank you. I will watch again to understand better as i am still new to frontend. keep making some simple intro videos please
Will do! 👍 Anything specific you would like to see?
@@JonMeyers Yes please, Please make or (give the link to the video if already exists) about how much it cost to use Supabase, how much storage we can use, and when it will start charging. i am already using supabase in my first webproject i am doing on my own. and learning so much everyday. Thank you for responding
I really like this. for some reason it works with chrome but not with edge
The best guide, should you guide it with Angular Project?
good video, could you make a video explaining how would be the workflow between enviroments (prod, test, local) with different supabase projects? this for those who do not have branching yet. 😀
This is a great idea! Will add it to the list 👍
+1 to this, I am new and trying to understand this concept. I hope you can create a video on this topic.
I have got could not autheticate use after i put the email and password
good stuff! Btw would you mind doing a tutorial for using Supabase Realtime (no `postgres_changes` involved, just Presence and Broadcast)? I feel like the official documentation is somewhat lacking and I’m struggling to get Realtime to work properly. Thanks for all your work!
@ml-tech have you seen chatapp video stream from this team? they have realtime in those videos, or is it not what you asking? sorry, just responding with whatever i know so far. i'm still newrespoding
Tyler did an awesome video on exactly this for Flutter! Do you think a Next.js version would be helpful?
This is that awesome Flutter video by Tyler: ruclips.net/video/QhRNXlFLaeE/видео.html
@@JonMeyers thanks! I got unstuck by myself. Now I have the app almost ready for prod 🚀 Realtime is awesome!
Could you please do one on supabase, prisma and nextjs
Sign-ups are getting rate limited because of /user route being looped on.
I'm having the exact same problem. After 4 attempts I suddenly have more than 30 requests
Did you resolve it?
@@meet_codes7467 Not really, I went with Clerk lol
Yeah! But give me the same for the SvelteKit )) Please, more content with Svelte :)
100% rug pull coming very soon.
Could you create this exact same example for Nuxt? It would save so many people so much time.
Thanks.
I am planning to jump into Nuxt soon and create some Supabase videos. Will add this one to the list 👍
@@JonMeyers 👍
Anyway to get type safety like prisma
Yes 👉 supabase.com/docs/guides/api/rest/generating-types
Not useful at all…
You were supposed to show how to set supabase with nextjs
What u really showed is get the template and start using is 😅
I don't know why you guys @supabase team wanna looks like Firebase, I know Supabase since Supabase released for the first time, however I gonna use this onefor my project recently (hopefully), and I just realize the Supabase is not like Firebase, these are just recreate some part of another technology and combined it being one place. What is your make special? For example, for the database, before I deep dive to learn it I think that is NoSql, apparently SQL. That's also the engine from AWS. a bit fooled.
is it okay to do the supabase auth setup as you did in Twitter clone in egghead course for NextJS? @Supabase @JonMeyers