Quick Start: Next.js & Supabase in 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: https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF&feature=shared
▶ How to host a Postgres database with Supabase: https://youtu.be/9T6tjTQ4Zo4
▶ This is why you need cookie-based Auth for the Next.js App Router (2024): https://youtu.be/w3LD0Z73vgU?feature=shared

👇 Learn more about Supabase 👇

🕸 Website: https://supabase.com/
🏁 Get started: https://app.supabase.com/
📄 Docs: https://supabase.com/docs

🔔 Subscribe for more tutorials and feature updates from Supabase: https://www.youtube.com/channel/UCNTVzV1InxHV-YR0fSajqPQ?sub_confirmation=1

📱 Connect with Us:
▶ GitHub: https://github.com/supabase/supabase/
▶︎ Discord: https://discord.supabase.com/
▶ Twitter: https://www.twitter.com/supabase/
▶ Instagram (follow for memes): https://www.instagram.com/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